¿Cómo puedo hacer que varias tablas html tengan el mismo ancho de columna?

Question

Tengo varias tablas html. Cada tabla tiene el mismo número de columnas pero con diferentes conjuntos de datos en cada celda.

<table><tr> 
    <td>Col 1 Table 1</td> 
    <td>Col 2 Table 1</td> 
    <td>Col 3 Table 1</td> 
</tr></table> 

<table><tr> 
    <td>Col 1 Table 2</td> 
    <td>Col 2 Table 2</td> 
    <td>Col 3 Table 2</td> 
</tr></table> 

Quería averiguar la forma más fácil de cada columna comparables a través de estas tablas (por lo que cada primera columna, cada segunda columna, etc.) tener la misma anchura por lo que todas las mesas se alinean perfectamente.

Por alguna razón específica, no puedo fusionar estos en una sola tabla, así que quiero ver si de todos modos hay varias tablas.

Parece que las tablas (independientemente de cualquier CSS que ponga) se cambian en función de los datos que están en la celda.

¿Alguna sugerencia?

Answer 1

En su mayor flexibilidad I establece que cada columna con su propia clase.

CSS

.column-1 { 
    width: 100px; 
} 
.column-2 { 
    width: 300px; 
} 
.column-3 { 
    width: 225px; 
} 

HTML

<table><tr> 
    <td class="column-1">Col 1 Table 1</td> 
    <td class="column-2">Col 2 Table 1</td> 
    <td class="column-3">Col 3 Table 1</td> 
</tr></table> 

<table><tr> 
    <td class="column-1">Col 1 Table 2</td> 
    <td class="column-2">Col 2 Table 2</td> 
    <td class="column-3">Col 3 Table 2</td> 
</tr></table> 

Si usted tiene el lujo de usar CSS3 también se podría utilizar el selector de nth-child para lograr esto que reducir la cantidad de HTML que puedes Necesitaría escribir.

Answer 2

estoy seguro de que con css usted puede hacer esto:

td { width: 200px } 

Answer 3

La aplicación de las anchuras a <td> elementos deben trabajar fijo. Si no funciona para usted, tal vez haya un estilo que anule el estilo que especificó o que tenga un error de sintaxis en su CSS. ¿Olvidaste las unidades (por ejemplo, px, em)? Use Firebug (o una herramienta similar) para determinar qué estilos se están aplicando/redefiniendo. En general, algo similar a esto debería funcionar:

td { 
    width: 200px; 
} 

No sé si esto es factible para su base de código, pero otra opción es especificar una sola tabla con múltiples <tbody> elementos. De esta manera:

<table> 

<tbody><tr> 
    <td>Col 1 Table 1</td> 
    <td>Col 2 Table 1</td> 
    <td>Col 3 Table 1</td> 
</tr></tbody> 

<tbody><tr> 
    <td>Col 1 Table 2</td> 
    <td>Col 2 Table 2</td> 
    <td>Col 3 Table 2</td> 
</tr></tbody> 

</table> 

Cualquier marcación que aparezca entre sus 2 tablas debería ser parte de la tabla más grande también. Puede colocar ese contenido en un tercer elemento <tbody> que contenga solo una fila y una celda si es necesario. Nuevamente, no estoy seguro de qué tan bien su código base se podría prestar a esta refactorización, pero lo estoy exponiendo como una opción.

Answer 4

Trate de usar javascript después de cargar las tablas.

Answer 5

¿Cómo se usa el estilo css? Debe establecer ancho fijo para celdas en la primera fila de cada tabla.

<table> 
    <tr> 
    <td style="width:100px"></td> 
    <td style="width:120px"></td> 
</tr> 
<tr> 
    <td></td> 
    <td></td> 
</tr> 
</table> 

Editar: Es, por supuesto, mejor usar clases css, pero se puede cambiar una vez que se va a ver si funciona para usted.

<table> 
    <tr> 
    <td class="c1"></td> 
    <td class="c2"></td> 
</tr> 
<tr> 
    <td></td> 
    <td></td> 
</tr> 
</table> 
<!-- ... --> 
<table> 
    <tr> 
    <td class="c1"></td> 
    <td class="c2"></td> 
</tr> 
<tr> 
    <td></td> 
    <td></td> 
</tr> 
</table> 

etc ..