Configuración del ancho de columna de la tabla

Tengo una tabla simple que se usa para una bandeja de entrada de la siguiente manera:

<table border="1">
     <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table>

¿Cómo configuro el ancho para que Desde y Fecha sean el 15% del ancho de la página y el Asunto sea el 70%? También quiero que la tabla ocupe todo el ancho de la página.

May 30 '09 09:05 alamodey

Puede establecer el ancho de una columna de la tabla utilizando la propiedad CSSwidth del colelemento . El valor del ancho se especifica más comúnmente en píxeles ( width: 200px;) o como porcentaje del ancho del elemento principal ( width: 50%;). Ejemplo con styleatributo en línea:

<table style="width: 100%">
    <colgroup>
       <col span="1" style="width: 15%;">
       <col span="1" style="width: 70%;">
       <col span="1" style="width: 15%;">
    </colgroup>
    
    
    
    <!-- Put <thead>, <tbody>, and <tr>'s here! -->
    <tbody>
        <tr>
            <td style="background-color: #777">15%</td>
            <td style="background-color: #aaa">70%</td>
            <td style="background-color: #777">15%</td>
        </tr>
    </tbody>
</table>

Expandir fragmento

May 30 '2009 02:05 Gordon Gustafson

table {
  width: 100%;
  border: 1px solid #000;
}
th.from, th.date {
  width: 15%
}
th.subject {
  width: 70%; /* Not necessary, since only 70% width remains */
}

<table>
  <thead>
    <tr>
      <th class="from">From</th>
      <th class="subject">Subject</th>
      <th class="date">Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>[from]</td>
      <td>[subject]</td>
      <td>[date]</td>
    </tr>
  </tbody>
</table>

Expandir fragmento

La mejor práctica es mantener su HTMLy CSSseparado para reducir la duplicación de código y separar las preocupaciones ( HTMLpara estructura y semántica, y CSSpara presentación).

Tenga en cuenta que, para que esto funcione en versiones anteriores de Internet Explorer, es posible que deba darle a su tabla un ancho específico (por ejemplo, 900 px). Ese navegador tiene algunos problemas para representar un elemento con dimensiones porcentuales si su contenedor no tiene dimensiones exactas.

May 30 '2009 02:05 Ron DeVera

Utilice el CSS a continuación, la primera declaración garantizará que su tabla se ajuste a los anchos que proporcione (deberá agregar las clases en su HTML):

table{
  table-layout:fixed;
}
th.from, th.date {
  width: 15%;
}
th.subject{
  width: 70%;
}

Jun 14 '2011 13:06 Pete

Forma alternativa con una sola clase manteniendo tus estilos en un archivo CSS, que incluso funciona en IE7:

<table class="mytable">
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table>
<style>
    .mytable td, .mytable th { width:15%; }
    .mytable td + td, .mytable th + th { width:70%; }
    .mytable td + td + td, .mytable th + th + th { width:15%; }
</style>

Más recientemente, también puedes usar el nth-child()selector de CSS3 (IE9+), donde acabas de poner el nr. de la columna respectiva entre paréntesis en lugar de unirlos con el selector adyacente. Así, por ejemplo:

<style>
    .mytable tr > *:nth-child(1) { width:15%; }
    .mytable tr > *:nth-child(2) { width:70%; }
    .mytable tr > *:nth-child(3) { width:15%; }
</style>

Oct 11 '2013 10:10 DanMan