CSS: A Simple Way to Set Table Column Widths

Here’s a very simple way to size your table columns with a few lines of CSS instead of giving inline values to each cell. This method makes creating responsive tables much easier.

Demo: How It Looks

CSS

Copy the code below and paste it into your CSS file.

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

Copy the code below and paste it into your HTML document.

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

You can copy both the CSS and HTML to your file and tweak them as you like!

Note: these selectors target every table on the page. To limit them to one table, put a class in front of each selector, for example .my-table td:nth-child(1). Padding and content also set a minimum width, so very narrow columns (like the 5% one) may render wider than specified.