CSS 반응형 테이블

1 개요[ | ]

responsive table
반응형 테이블

2 가로 스크롤[ | ]

화면 폭이 테이블 너비보다 좁을 때는 가로 스크롤

<style>
.table1-wrapper {
  overflow-x: auto; /* responsive */
}
.table1 {
  width: 100%; /* responsive */
  border-collapse: collapse;
}
.table1 th, .table1 td {
  padding: 10px;
  border: 1px solid #ddd;
}
</style>
<div class="table1-wrapper">
<table class="table1">
<tr><th>#</th><th>column1</th><th>column2</th><th>column3</th><th>column4</th><th>column5</th><th>column6</th><th>column7</th><th>column8</th><th>column9</th><th>column10</th><th>column11</th><th>column12</th></tr>
<tr><th>row1</th><td>cell1</td><td>cell2</td><td>cell3</td><td>cell4</td><td>cell5</td><td>cell6</td><td>cell7</td><td>cell8</td><td>cell9</td><td>cell10</td><td>cell11</td><td>cell12</td></tr>
<tr><th>row2</th><td>cell1</td><td>cell2</td><td>cell3</td><td>cell4</td><td>cell5</td><td>cell6</td><td>cell7</td><td>cell8</td><td>cell9</td><td>cell10</td><td>cell11</td><td>cell12</td></tr>
<tr><th>row3</th><td>cell1</td><td>cell2</td><td>cell3</td><td>cell4</td><td>cell5</td><td>cell6</td><td>cell7</td><td>cell8</td><td>cell9</td><td>cell10</td><td>cell11</td><td>cell12</td></tr>
</table>
</div>

3 언피벗[ | ]

CSS 반응형 테이블 - 언피벗 문서를 참고하십시오.

화면 폭이 지정한 너비보다 좁을 때는 언피벗 형태로 전환

<style>
.table1 {
  border-collapse: collapse;
  min-width: 200px;
}
.table1 th, .table1 td {
    padding: 10px;
    border: 1px solid #ddd;
}
@media (max-width: 760px) {
  .table1 thead { 
		display: none;
	}
  .table1, .table1 tbody, .table1 tr, .table1 th, .table1 td {
    display: block;
	}
  .table1 td {
    position: relative;
    padding-left: 50%; 
  }
  .table1 td:before {
		position: absolute;
		top: 24%;
    right: 65%;
    font-weight: bold;
	}
  .table1 td:nth-of-type(1):before { content: "column1"; }
  .table1 td:nth-of-type(2):before { content: "column2"; }
  .table1 td:nth-of-type(3):before { content: "column3"; }
  .table1 td:nth-of-type(4):before { content: "column4"; }
  .table1 td:nth-of-type(5):before { content: "column5"; }
  .table1 td:nth-of-type(6):before { content: "column6"; }
  .table1 td:nth-of-type(7):before { content: "column7"; }
  .table1 td:nth-of-type(8):before { content: "column8"; }
}
</style>
<table class="table1">
<thead>
  <tr><th>#</th><th>column1</th><th>column2</th><th>column3</th><th>column4</th><th>column5</th><th>column6</th><th>column7</th><th>column8</th></tr>
</thead>
<tbody>
  <tr><th>row1</th><td>cell1</td><td>cell2</td><td>cell3</td><td>cell4</td><td>cell5</td><td>cell6</td><td>cell7</td><td>cell8</td></tr>
  <tr><th>row2</th><td>cell1</td><td>cell2</td><td>cell3</td><td>cell4</td><td>cell5</td><td>cell6</td><td>cell7</td><td>cell8</td></tr>
  <tr><th>row3</th><td>cell1</td><td>cell2</td><td>cell3</td><td>cell4</td><td>cell5</td><td>cell6</td><td>cell7</td><td>cell8</td></tr>
</tbody>
</table>

4 같이 보기[ | ]