컴퓨터/HTML & CSS

CSS : table

수제녹차 2019. 8. 28. 15:32
728x90
반응형
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<!-- tr은 가로줄 -->
<body>
    <table>
        <thead>
            <tr>
                <th style='width:100px' scope="col">이름</th>
                <th style='width:100px' scope="col">직업</th>
                <th style='width:100px' scope="col">직책</th>
                <th style='width:calc(100% - 350px)' scope="col">이메일</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr user-id='1234'>
                <td style='width:100px'data-label="이름"><span>도라에몽</span></td>
                <td style='width:100px'data-label="직업"><span>연구원</span></td>
                <td style='width:100px'data-label="직책"><span>-</span></span></td>
                <td style='width:calc(100% - 350px)'data-label="이메일"><span>doraemong@gmail.com</span></td>
                <td><input type='button' value='+' style='width:20px; min-height:20px; height:20px'></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 

- table element is set as "display: table"

tr -> display:table-row

td -> display: table-cell

 

- table 셀 너비보다 텍스트가 길 경우 말 줄임표 표시하는 방법

1) <table> 속성으로 table-layout: fixed; 주기

2)

td {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

 

- tr의 border styling 하는 법

tr에 클래스를 준 후

tr.border_bottom td {
  border-bottom:1pt solid black;
}

이런 식으로 css 파일 만들기

반응형