2009-07-31 25 views
10

Tengo 2 tablas HTML que están directamente una encima de la otra. Cada tabla tiene el mismo número de columnas, pero el texto que contienen puede diferir. Y cada tabla puede contener muchas filas. Me gustaría que estas 2 tablas tengan exactamente el mismo ancho de columna para que las columnas siempre se alineen. No me importa si el texto dentro de las columnas se envuelve tanto como sea necesario. Y no puedo combinar todas las filas en una sola tabla por otras razones.Hacer 2 tablas tienen los mismos tamaños de columna

¿Hay alguna forma de que esto suceda?

Tenga en cuenta que esta solución solo tiene que funcionar en Firefox y en las últimas 2 versiones de IE.

+2

Simplemente curioso acerca de las razones por las que no la combinación de todas las filas en una sola tabla, ya que hubiera sido mi sugerencia ? poniendo cada conjunto de filas en su propio elemento , y agregar un conjunto de encabezados a cada cuerpo puede producir algunos buenos resultados. – belugabob

+0

Estamos utilizando una biblioteca Javascript existente para mostrar/ocultar tablas de datos en función de diversas condiciones. Funciona en tablas enteras a la vez. Realmente no quería tener que entrar y modificar esa biblioteca si había una forma de obtener el resultado usando HTML y/o CSS. – Shane

+1

Ah, ya veo, eso hace que la vida sea incómoda para ti. La solución menos molesta, entonces, es forzar el ancho de las columnas a un valor conocido, y sugeriría hacerlo con estilos CSS, en lugar de estilos en línea, ya que esto significa que puede cambiar los valores en un solo lugar, pero todavía afecta a todas las mesas Si decide investigar el enfoque de tabla única, podrá ocultar efectivamente "tablas completas" al ocultar la sección de tbody que corresponde a una tabla lógica. – belugabob

Respuesta

2

Hasta donde yo sé, no se pueden alinear las columnas de dos tablas.

Puede crear una tabla y usar el CSS para que se vea como dos.

<table> 
    <tr> <!-- First table header --> </tr> 
    <tr> <!-- First table rows... --></tr> 
    <tr> <!-- First table footer... --></tr> 
    <tr> <!-- Empty space between tables --> </tr> 
    <tr> <!-- Second table header --> </tr> 
    <tr> <!-- Second table rows... --></tr> 
    <tr> <!-- Second table footer... --></tr> 
</table> 
+0

He hecho esto antes con CSS haciendo los bordes según sea necesario. Se siente como un truco, pero funcionó para mí. –

4

Sugiero usar anchos de porcentaje en sus columnas, asegurándose de que esos anchos siempre sumen 100%.

<style type="text/css"> 
    table { width: 100%; } 
    td.colA { width: 30%; } 
    td.colB { width: 70%; } 
</style> 

<table> 
    <tr> 
    <td class="colA">Lorem ipsum</td> 
    <td class="colB">Lorem ipsum</td> 
    </tr> 
</table> 

<table> 
    <tr> 
    <td class="colA">Lorem ipsum</td> 
    <td class="colB">Lorem ipsum</td> 
    </tr> 
</table> 
+0

Esto funciona IF: (1) acepta tamaños fijos (sí, el porcentaje sigue siendo fijo en el sentido de que el navegador no lo está eligiendo, el autor de la página lo está eligiendo), (2) la biblioteca pone clases en sus columnas para usted para controlar con CSS, (3) si el tamaño que elige no es demasiado pequeño para la celda con la palabra más larga. Y, hasta ahora, es la solución más fácil que he visto. –

0

celdas de la tabla son fluidos por naturaleza, de modo que no es posible en tan sólo html/css a menos que dar las columnas una anchura fija (fija puede, por supuesto también ser un porcentaje).

Por supuesto, puede utilizar javascript para encontrar la tabla más amplia, obtener sus anchos de columna y usar esos valores para la tabla más pequeña, pero la solución sugerida por belugabob como comentario es mucho mejor.

0

Me arreglé una situación similar para mi sitio web en IE 9, Chrome 14 y FireFox 8 con la siguiente Mi tabla contiene cuatro columnas, las impares contienen etiquetas e incluso contiene entradas. Tengo cuatro tablas en mi página y todas las columnas de cada tabla están alineadas verticalmente. Esperamos que estas medidas ayudarían

1- Descargar una imagen transparente desde cualquier lugar, probablemente del tamaño de 1x1 para que pueda ajustar su tamaño como por su necesidad (no estoy seguro si una imagen se puede reducir también mediante CSS)

2- Definir su mesa tan

<table class="formed"> 
      <tr> 
       <th class="colLabel"></th> 
       <th class="colField"></th> 
       <th class="colLabel"></th> 
       <th class="colField"></th> 
      </tr> 
     <tr> 
      <td></td> 
[now rest of your columns row by row] 

3- Definir el CSS como

.colLabel 
{ 
    text-align:right; 
    padding-right:0em; 
    height:auto; 
    background-image:url(Resources/Images/transparent.gif); 
    background-repeat:no-repeat; 
    width:8em; 
} 
.colField 
{ 
    text-align:left; 
    padding-right:0em; 
    height:auto; 
    background-image:url(Resources/Images/transparent.gif); 
    background-repeat:no-repeat; 
    width:20em; 
} 

.formed 
{ 
    width:90%; 
    table-layout:fixed; 
    padding:0; 
    margin:0; 
} 
Cuestiones relacionadas