CSS: 표의 열 너비를 간단하게 설정하는 방법

각 셀에 인라인 값을 지정하는 대신 몇 줄의 CSS만으로 표의 열 너비를 정하는 아주 간단한 방법입니다. 이 방법을 쓰면 반응형 표를 훨씬 쉽게 만들 수 있습니다.

데모: 결과 화면

CSS

아래 코드를 복사해 CSS 파일에 붙여 넣으세요.

table tr td { padding: 20px; }
table td:nth-child(1) { width: 35%; }
table td:nth-child(2) { width: 15%; }
table td:nth-child(3) { width: 5%; }
table td:nth-child(4) { width: 35%; }
table td:nth-child(5) { width: 10%; }

HTML

아래 코드를 복사해 HTML 문서에 붙여 넣으세요.

<table class="table" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>35%</td>
    <td>15%</td>
    <td>5%</td>
    <td>35%</td>
    <td>10%</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
</table>

CSS와 HTML 코드를 모두 복사해 파일에 넣고 원하는 대로 수정해 보세요!

참고: 이 선택자는 페이지의 모든 표에 적용됩니다. 하나의 표에만 적용하려면 각 선택자 앞에 클래스를 붙이세요(예: .my-table td:nth-child(1)). 또한 패딩과 내용이 최소 너비를 정하므로, 5% 열처럼 매우 좁은 열은 지정한 값보다 넓게 표시될 수 있습니다.