Establecer el ancho de columna de la tabla

204

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>

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

alamodey
fuente

Respuestas:

318

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

Gordon Gustafson
fuente
55
Como la limpieza de esta solución. Sin embargo, cierre la columna, por ejemplo, <col span = "1" style = "width: 15%;" /> o <col span = "1" style = "width: 15%;"> </col>
lsu_guy
23
@Isu_guy solo cierra <col> cuando usa XHTML - en HTML, la etiqueta <col> no tiene cierre ... vea el enlace para más información. En HTML5, <col> es un elemento vacío, lo que significa que NO DEBE cerrarse
Matija Nalis
44
@Zulu según w3schools.com/tags/att_col_width.asp "El atributo <col> width no es compatible con HTML5".
Caltor
30
@Caltor: el código no usa <col> width attribute; está utilizando a CSS *style* width, que es lo que reemplazó al atributo de ancho <col>. (¡a pesar de que varias personas votaron por ese comentario!)
ToolmakerSteve
44
span="1"es superfluo ya que 1 es el valor predeterminado.
Madbreaks
128

HTML:

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

CSS:

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

La mejor práctica es mantener su HTML y CSS separados para una menor duplicación de código y para la separación de preocupaciones (HTML para estructura y semántica, y CSS para presentación).

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

Ron DeVera
fuente
esta solución falla si tiene colspans en la primera fila
mark1234
3
Bueno porque <col width = ""> es obsoleto en HTML5: developer.mozilla.org/en/docs/Web/HTML/Element/col
Richard
30

Use el CSS a continuación, la primera declaración asegurará que su tabla se adhiera al ancho que proporcione (necesitará agregar las clases en su HTML):

table{
  table-layout:fixed;
}
th.from, th.date {
  width: 15%;
}
th.subject{
  width: 70%;
}
Pete
fuente
En realidad, solo necesita especificar el ancho de las dos columnas. El tercero se calculará automáticamente, por lo que table{table-layout:fixed};.from,.date{width:15%}es suficiente. A menos que las clases se utilicen también en otros elementos, la escritura th.fromes redundante y se puede acortar a justa .from.
tomasz86
14

De forma alternativa con solo una clase mientras mantiene sus 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 puede usar el nth-child()selector de CSS3 (IE9 +), donde simplemente pondría el nr. de la columna respectiva en el 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>
DanMan
fuente
La :nth-childsolución propuesta es horrible en términos de rendimiento. No hay una razón válida para usarlo (especialmente con el selector universal) en este ejemplo donde solo hay tres elementos ( tho col) para diseñar. Además, solo necesita establecer el ancho then la primera fila. El .mytable tden el primer ejemplo es redundante.
tomasz86
"La solución propuesta: enésimo hijo es horrible en términos de rendimiento". - cita requerida.
DanMan
Esto debería ser suficiente: renderizar eficientemente CSS . Con el uso del selector universal, el navegador primero verificará TODOS los elementos si son enésimo hijo de otro elemento, luego si su padre directo lo es try luego si pertenecen .mytable. Si realmente desea utilizar "enésimo", entonces algo como esto probablemente será mucho mejor: .mytable th:nth-of-type(1) {width: 15%}; .mytable th:nth-of-type(2) {width: 70%};. Tampoco es necesario especificar el ancho de la tercera columna en este caso.
tomasz86
Personalmente usaría clases o simplemente .mytable th+th{width: 70%}.mytable th+th+th{width:15%}. Los "enésimos" selectores pueden ser muy útiles, pero en este caso particular (una tabla pequeña con solo 3 columnas) no son realmente necesarios. Cuando se utiliza table-layout: fixedincluso se puede hacer precisamente esto: table{table-layout:fixed}th:first-child+th{width:70%}.
tomasz86
Estoy al tanto. Pero esos artículos son de años atrás, y hoy existen mayores problemas que los selectores CSS, como grandes cantidades de imágenes y código JS.
DanMan
8

Estas son mis dos sugerencias.

  1. Usando clases. No es necesario especificar el ancho de las otras dos columnas, ya que el navegador las establecerá en un 15% cada una automáticamente.

        table { table-layout: fixed; }
        .subject { width: 70%; }
        <table>
          <tr>
            <th>From</th>
            <th class="subject">Subject</th>
            <th>Date</th>
          </tr>
        </table>

  2. Sin usar clases. Tres métodos diferentes pero el resultado es idéntico.

    una)

        table { table-layout: fixed; }
        th+th { width: 70%; }
        th+th+th { width: 15%; }
        <table>
          <tr>
            <th>From</th>
            <th>Subject</th>
            <th>Date</th>
          </tr>
        </table>

    si)

        table { table-layout: fixed; }
        th:nth-of-type(2) { width: 70%; }
        <table>
          <tr>
            <th>From</th>
            <th>Subject</th>
            <th>Date</th>
          </tr>
        </table>

    c) Este es mi favorito. Igual que b) pero con mejor soporte de navegador.

        table { table-layout: fixed; }
        th:first-child+th { width: 70%; }
        <table>
          <tr>
            <th>From</th>
            <th>Subject</th>
            <th>Date</th>
          </tr>
        </table>

tomasz86
fuente
5

Dependiendo de su cuerpo (o el div que está envolviendo su tabla) 'configuraciones', debería poder hacer esto:

body {
  width: 98%;
}

table {
  width: 100%;
}


th {
  border: 1px solid black;
}


th.From, th.Date {
  width: 15%;
}

th.Date {
  width: 70%;
}


<table>
  <thead>
    <tr>
      <th class="From">From</th>
      <th class="Subject">Subject</th>
      <th class="Date">Date</th>
    </tr>
   </thead>
   <tbody>
     <tr>
       <td>Me</td>
       <td>Your question</td>
       <td>5/30/2009 2:41:40 AM UTC</td>
     </tr>
   </tbody>
</table>

Manifestación

Boris Guéry
fuente
5

    table { table-layout: fixed; }
    .subject { width: 70%; }
    <table>
      <tr>
        <th>From</th>
        <th class="subject">Subject</th>
        <th>Date</th>
      </tr>
    </table>

Héctor David
fuente
4
<table>
  <col width="130">
  <col width="80">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Manifestación

Srinivas Erukulla
fuente
8
El atributo de ancho de columna no es compatible con HTML5.
Runa
4

Intenta esto en su lugar.

<table style="width: 100%">
    <tr>
        <th style="width: 20%">
           column 1
        </th>
        <th style="width: 40%">
           column 2
        </th>
        <th style="width: 40%">
           column 3
        </th>
    </tr>
    <tr>
        <td style="width: 20%">
           value 1
        </td>
        <td style="width: 40%">
           value 2
        </td>
        <td style="width: 40%">
           value 3
        </td>
    </tr>
</table>
Milán
fuente
3

No use el atributo de borde, use CSS para todas sus necesidades de estilo.

<table style="border:1px; width:100%;">
    <tr>
            <th style="width:15%;">From</th>
            <th style="width:70%;">Subject</th>
            <th style="width:15%;">Date</th>
    </tr>
... rest of the table code...
</table>

Pero incrustar CSS de esa manera es una mala práctica: en su lugar, se deben usar clases de CSS y colocar las reglas de CSS en un archivo CSS externo.

Etienne Perot
fuente
1
Sospecharía que el código de ejemplo que publicaron el OP y los útiles stackoverflowians fue por legibilidad y simplicidad, de ninguna manera un estímulo para los estilos en línea.
Tass
2

Aquí hay otra forma mínima de hacerlo en CSS que funciona incluso en navegadores más antiguos que no son compatibles :nth-childy selectores similares: http://jsfiddle.net/3wZWt/ .

HTML:

<table>
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
    <tr>
        <td>Dmitriy</td>
        <td>Learning CSS</td>
        <td>7/5/2014</td>
    </tr>
</table>

CSS:

table {
    border-collapse: collapse;
    width: 100%;
}

tr > * {
    border: 1px solid #000;
}

tr > th + th {
    width: 70%;
}

tr > th + th + th {
    width: 15%;
}
DRD
fuente
2

Agregue colgroup después de su etiqueta de tabla. Defina el ancho y el número de columna aquí. y agregue la etiqueta tbody. Pon tu tr dentro de tbody.

<table>
    <colgroup>
       <col span="1" style="width: 30%;">
       <col span="1" style="width: 70%;">
    </colgroup>


    <tbody>
        <tr>
            <td>First column</td>
            <td>Second column</td>
        </tr>
    </tbody>
</table>
Abdus Salam Azad
fuente
0
style="column-width:300px;white-space: normal;"
Wut Worawit
fuente
Hola, bienvenido a Stack Overflow. En general, las respuestas con texto (en lugar de solo código) y alguna explicación se consideran mejores que solo las respuestas de solo código. Como esta pregunta es más antigua y tiene muchas otras respuestas, pueden ayudarlo a guiarlo en futuras respuestas.
jwheron