[HTML/CSS] create table !
border은 없지만 이런 모양의 table을 만드려면 table tag를 아래와 같이 이용하면 된다.
<table>
<thead>
<tr>
<th>color</th>
<th>size</th>
<th>amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
pulple
</td>
<td>
lg
</td>
<td>
110
</td>
</tr>
<tr>
<td>yellow</td>
<td>sm</td>
<td>20</td>
</tr>
</tbody>
</table>
<style lang="scss" scoped>
table {
border-collapse: collapse;
tr {
이제 border 속성 추가 가능!
border-bottom: 1px solid black;
}
}
</style>
border 속성은 table tag에 기본적으로 상속되지 않기 때문에 border-collapse: collapse 속성을 사용하여 각 셀마다 구분되는 경계선이 빈공간을 없애준다.
collapse 속성 값이 있어야 tr, th tag의 border 속성 디자인이 알맞게 적용되기 때문에 tr, th tag에 border가 있다면 꼭 넣어줘야 한다.
Author And Source
이 문제에 관하여([HTML/CSS] create table !), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@soor/HTMLCSS-create-table저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)