Tabla con diseño de tabla: fijo; y cómo hacer una columna más ancha

así que tengo una tabla con este estilo:Tabla con diseño de tabla: fijo; y cómo hacer una columna más ancha

table-layout: fixed;

que hace que todas las columnas sean de la misma anchura. Me gustaría tener una columna (la primera) para ser más ancha y luego el resto de las columnas para ocupar el ancho restante de la tabla con anchos iguales.

¿Cómo lograr eso?

table { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
    background: #ddd; 
 
    table-layout: fixed; 
 
} 
 

 
table th, table td { 
 
    border: 1px solid #000; 
 
} 
 

 
table td.wideRow, table th.wideRow { 
 
    width: 300px; 
 
}

<table class="CalendarReservationsBodyTable"> 
 
    <thead> 
 
    <tr> 
 
     <th colspan="97">Rezervovane auta</th> 
 
    </tr> 
 
    <tr> 
 
     <th class="corner wideRow">Auto</th> 
 
     <th class="odd" colspan="4">0</th> 
 
     <th class="" colspan="4">1</th> 
 
     <th class="odd" colspan="4">2</th> 
 
     <th class="" colspan="4">3</th> 
 
     <th class="odd" colspan="4">4</th> 
 
     <th class="" colspan="4">5</th> 
 
     <th class="odd" colspan="4">6</th> 
 
     <th class="" colspan="4">7</th> 
 
     <th class="odd" colspan="4">8</th> 
 
     <th class="" colspan="4">9</th> 
 
     <th class="odd" colspan="4">10</th> 
 
     <th class="" colspan="4">11</th> 
 
     <th class="odd" colspan="4">12</th> 
 
     <th class="" colspan="4">13</th> 
 
     <th class="odd" colspan="4">14</th> 
 
     <th class="" colspan="4">15</th> 
 
     <th class="odd" colspan="4">16</th> 
 
     <th class="" colspan="4">17</th> 
 
     <th class="odd" colspan="4">18</th> 
 
     <th class="" colspan="4">19</th> 
 
     <th class="odd" colspan="4">20</th> 
 
     <th class="" colspan="4">21</th> 
 
     <th class="odd" colspan="4">22</th> 
 
     <th class="" colspan="4">23</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="alignRight wideRow">KE-260 FC - Octavia combi</td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td colspan="16" class="highlighted borderLeft" title="Richard Knop"> 
 
     Richard Knop 
 
     </td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td colspan="14" class="highlighted" title="Richard Knop"> 
 
     Richard Knop 
 
     </td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

jsFiddle: http://jsfiddle.net/6p9K3/

Aviso la primera columna, quiero que sea 300px amplia.

Fuente

2011-06-06 Richard Knop

Se podía dar la primera celda (por lo tanto la columna) un ancho y tienen el defecto resto de auto

table { 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 
td { 
 
    border: 1px solid #000; 
 
    width: 150px; 
 
} 
 
td+td { 
 
    width: auto; 
 
}

<table> 
 
    <tr> 
 
    <td>150px</td> 
 
    <td>equal</td> 
 
    <td>equal</td> 
 
    </tr> 
 
</table>

o, alternativamente, el "camino correcto" para obtener la columna los anchos pueden ser para usar el col element en sí mismo

table { 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 
td { 
 
    border: 1px solid #000; 
 
} 
 
.wide { 
 
    width: 150px; 
 
}

<table> 
 
    <col span="1" class="wide"> 
 
    <tr> 
 
     <td>150px</td> 
 
     <td>equal</td> 
 
     <td>equal</td> 
 
    </tr> 
 
</table>

Fuente

2011-06-06 15:30:48 clairesuzy

¿Funciona eso con la tabla en mi enlace jsfiddle? –

sí parece - sin duda la técnica 'col' lo hace de todos modos: ** [ver el violín actualizado] (http://jsfiddle.net/clairesuzy/HSVae/) - y con el método colspan podría ir en un conjunto de otra columna anchos como se requiere demasiado – clairesuzy

Si usted tiene un 'thead' el ancho deberá ajustarse en su' th' –

¿Está creando una tabla muy grande (cientos de filas y columnas)? Si es así, es una buena idea, ya que el navegador solo necesita leer la primera fila para calcular y representar el total de table, por lo que se carga más rápido.

Pero si no, sugeriría vertido y cambiar el CSS de la siguiente manera:

table th, table td{ 
border: 1px solid #000; 
width:20px; //or something similar 
} 

table td.wideRow, table th.wideRow{ 
width: 300px; 
}

http://jsfiddle.net/6p9K3/1/

Fuente

2011-06-06 15:14:30

Eso no funciona correctamente. Mira 8,9,10,11 columnas, son demasiado estrechas. –

gotcha. Puede solucionarlo colocando el contenido en 'td' que abarca los cuatro' th's así: '

Richard Knop

' Establezca 'ancho' en la suma de todos los' td's individuales. Consulte aquí http://jsfiddle.net/6p9K3/2/ –

Lo que podría hacer es algo como esto (pseudocódigo):

<container table> 
    <tr> 
    <td> 
     <"300px" table> 
    <td> 
     <fixed layout table>

Básicamente, divide la tabla en dos tablas y colócala en otra tabla.

Fuente

2011-06-06 15:20:29 kei

+13

tablas anidadas son las mejores tablas – user1721135

Lo importante de table-layout: fijo es que los anchos de columna están determinadas por la primera fila de la tabla.

Así

si su estructura de la tabla es la siguiente (estructura de la tabla estándar)

<table> 
    <thead> 
     <tr> 
      <th> First column </th> 
      <th> Second column </th> 
      <th> Third column </th>   
     </tr> 
    </thead> 

    <tbody> 
     <tr> 
      <td> First column </td> 
      <td> Second column </td> 
      <td> Third column </td>   
     </tr> 
    </tbody>

si le gustaría dar una anchura a la segunda columna a continuación

<style> 
    table{ 
     table-layout:fixed; 
     width: 100%; 
    } 

    table tr th:nth-child(2){ 
     width: 60%; 
    } 

</style>

Por favor, fíjate que diseñamos el th no el td.

Fuente

2013-06-10 02:35:51 kta

Estilo que solucionó mi problema, gracias – Tim

great tip- table tr th: nth-child (4) –

Tabla con diseño de tabla: fijo; y cómo hacer una columna más ancha

Respuesta

Cuestiones relacionadas