CSS로 테이블 셀에 여백을 만드는 방법

4617 단어 HTMLCSSBootstrap

소개



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;
}

좋은 웹페이지 즐겨찾기