CSS: una forma sencilla de definir el ancho de las columnas de una tabla

Aquí tienes una forma muy sencilla de dimensionar las columnas de tu tabla con unas pocas líneas de CSS en lugar de poner valores en línea en cada celda. Este método facilita mucho la creación de tablas responsivas.

Demo: así se ve

CSS

Copia el código siguiente y pégalo en tu archivo 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

Copia el código siguiente y pégalo en tu documento 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>

Puedes copiar tanto el CSS como el HTML en tu archivo y modificarlos a tu gusto.

Nota: estos selectores afectan a todas las tablas de la página. Para limitarlos a una sola tabla, añade una clase delante de cada selector, por ejemplo .my-table td:nth-child(1). Además, el relleno y el contenido establecen un ancho mínimo, así que las columnas muy estrechas (como la del 5 %) pueden verse más anchas de lo indicado.