-
CSS : table컴퓨터/HTML & CSS 2019. 8. 28. 15:32728x90반응형
<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 파일 만들기
반응형'컴퓨터 > HTML & CSS' 카테고리의 다른 글
[HTML] input tag : autocomplete, type, required, readonly, disabled, 모바일 기기에서 제공 (0) 2020.02.04 width N height of elements (0) 2019.10.22 display: grid (0) 2019.10.02 (공백) (0) 2019.08.28 requestAnimationFrame() (0) 2019.08.28