[DataTables] 배경색(background) / 테두리 (border) 변경

테이블 라이브러리(table library)인 데이터테이블(DataTables) 배경색(background) 및 테두리(boder) 변경 방법

[html]

<table id="myTable" class="display">

  <thead>

      <tr>

          <th>Column 1</th>

          <th>Column 2</th>

      </tr>

  </thead>

  <tbody>

      <tr>

          <td>Row 1 Data 1</td>

          <td>Row 1 Data 2</td>

      </tr>

      <tr>

          <td>Row 2 Data 1</td>

          <td>Row 2 Data 2</td>

      </tr>

      <tr>

          <td>Row 3 Data 1</td>

          <td>Row 3 Data 2</td>

      </tr>

      <tr>

          <td>Row 4 Data 1</td>

          <td>Row 4 Data 2</td>

      </tr>

  </tbody>

</table>

 

[css]

html, body {

  background: #ddd;

  color: #333;

}

#myTable_wrapper .dataTables_length,

#myTable_wrapper .dataTables_filter {

  padding-bottom: 1rem;

}

#myTable {

  border: none; /* 테이블 최하단 테두리 제거 */

  border-radius: 4px;

  overflow: hidden;

  background: #fff;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

#myTable thead tr th {

  border-bottom: none; /* thead 하단 테두리 제거 */

  background: skyblue;

  color: navy;

}

#myTable tbody tr td {

  box-shadow: none; /* tbody의 배경색 제거 */

  border-top: 1px solid skyblue; /* 열 사이 테두리 변경 */

}

#myTable tbody tr.even td {

  background: rgba(0, 0, 0, 0.05); /* tbody의 짝수열 배경 삽입 */

}

 

[js]

let table = new DataTable('#myTable', {

  // options

});

 

See the Pen Untitled by j. sik (@jsik) on CodePen.