CSS로 테이블 셀에 여백을 만드는 방법
소개
bootstrap에서 구현하고 있던 Table Cell에 여백을 만들 때 조금 빠졌기 때문에 메모입니다.
HTML 및 CSS
bootstrap Examples에서
HTML
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
CSS
th,
td {
border-right: 1px solid #104A9E !important;
color: #104A9E;
}
변경점(CSS)
CSS에서 배경색과 같은 border를 추가하여 여백이있는 것처럼 보이도록 변경.
th,
td {
border-right: 1px solid #104A9E !important;
color: #104A9E;
}
/* 追加 */
tr {
border-bottom: 10px solid #e9f1f9;
}
Reference
이 문제에 관하여(CSS로 테이블 셀에 여백을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/the1031hiroto/items/8f4c2f0b5e022fb55f63
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
bootstrap Examples에서
HTML
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
CSS
th,
td {
border-right: 1px solid #104A9E !important;
color: #104A9E;
}
변경점(CSS)
CSS에서 배경색과 같은 border를 추가하여 여백이있는 것처럼 보이도록 변경.
th,
td {
border-right: 1px solid #104A9E !important;
color: #104A9E;
}
/* 追加 */
tr {
border-bottom: 10px solid #e9f1f9;
}
Reference
이 문제에 관하여(CSS로 테이블 셀에 여백을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/the1031hiroto/items/8f4c2f0b5e022fb55f63
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
th,
td {
border-right: 1px solid #104A9E !important;
color: #104A9E;
}
/* 追加 */
tr {
border-bottom: 10px solid #e9f1f9;
}
Reference
이 문제에 관하여(CSS로 테이블 셀에 여백을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/the1031hiroto/items/8f4c2f0b5e022fb55f63텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)