Here’s a very simple way to size your table width with a few lines of CSS instead of giving inline values to it. This method is much easier for creating responsive tables.
DEMO: How It Looks
35% | 15% | 5% | 35% | 10% |
A | B | C | D | E |
A | B | C | D | E |
A | B | C | D | E |
CSS
Copy the code below and paste into your CSS document.
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 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 CSS and HTML codes to your file and tweak around as you like!