alinee 2 anchos de columnas de la tabla entre sí

Question

Tengo 2 tablas una encima de la otra y me gustaría alinear sus anchos de columna exactamente entre sí, ¿hay alguna manera de hacerlo? anchuras col mesa fija intentado etc hay alegría

Se puede ver en el violín las columnas son un poco fuera de sí http://jsfiddle.net/askhe/

HTML

<table class="tblresults txtblack"> 
          <tr class="tblresultshdr bold"> 
           <td class="col1">Company</td> 
           <td>Currency</td> 
           <td>Bid</td> 
           <td>Ask</td> 
           <td>YTD Vol</td> 
          </tr> 
          <tr> 
           <td class="col1">ABC</td> 
           <td>GBP</td> 
           <td>94</td> 
           <td>16</td> 
           <td>3,567,900</td> 
          </tr> 
          <tr> 
           <td class="col1">DEF</td> 
           <td>GBP</td> 
           <td>3</td> 
           <td>46</td> 
           <td>10,000</td> 
          </tr> 
          <tr> 
           <td class="col1">GHI</td> 
           <td>GBP</td> 
           <td>3</td> 
           <td>46</td> 
           <td>10,000</td> 
          </tr> 
          <tr> 
           <td class="col1">JKLM</td> 
           <td>GBP </td> 
           <td>7</td> 
           <td>46</td> 
           <td>56,000</td> 
          </tr> 

</table> 
         <table class="tblresults txtblack margintop10"> 
          <tr> 
           <td colspan="5" class="bold" >Investments</td> 
          </tr> 
          <tr> 
           <td class="col1">ghjk</td> 
           <td>GBP</td> 
           <td>13</td> 
           <td>6</td> 
           <td>130,000</td> 
          </tr> 
          <tr> 
           <td class="col1">asdsa</td> 
           <td>GBP</td> 
           <td>120</td> 
           <td>46</td> 
           <td>16,000</td> 
          </tr> 
          <tr> 
           <td class="col1">dfdsfsdf </td> 
           <td>GBP</td> 
           <td>1</td> 
           <td>4</td> 
           <td>13,000</td> 
          </tr> 
         </table>​ 

CSS

table.tblresults { 
    width:100%; 
    *width:99.5%; 
    border: 1px solid #b9b8b8; 
    top: 0; 
} 
table.tblresults tr.tblresultshdr {background: lightgrey;} 
table.tblresults tr.tblresultshdr td {padding: 6px;} 
table.tblresults td {padding: 8px; border: 1px solid #b9b8b8;} 
table.tblresults td.col1 {width: 70%;} 
​ 

Answer 1

table elementos en los que significaban para datos científicos, como sondeos de experimentos, no para el diseño real:

Las tablas no deben utilizarse únicamente como un medio para distribuir el contenido del documento, ya que esto puede presentar problemas cuando se procesa en medios no visuales. Además, cuando se utilizan con gráficos, estas tablas pueden obligar a los usuarios a desplazarse horizontalmente para ver una tabla diseñada en un sistema con una pantalla más grande. Para minimizar estos problemas, los autores deben usar hojas de estilo para controlar el diseño en lugar de las tablas.

Si bien no los está usando para el diseño, su problema es en realidad un problema de renderizado/diseño. La solución más fácil para esto es merge both tables into one (jsfiddle).

Si prefiere que sus datos se encapsulen en muchas tablas pequeñas en lugar de una tabla gigante, tendrá que especificar un ancho para casi todas las columnas.

Answer 2

¿Por qué no ponerlos en la misma tabla? Parece que son semánticamente similares. http://jsfiddle.net/askhe/5/

Answer 3

Aunque estoy de acuerdo en que la solución para fusionar las tablas es la mejor y más simple en muchos casos, llegué a la necesidad de tener realmente 2 tablas separadas con columnas idénticas (para hacer una tabla fija y la segunda desplazable)

para lograr que, declaré 2 mesas con mismo número de columnas, una de las normas de ancho (% y px), uno sin

Luego, con Javascript, apliqué el ancho de la tabla gobernado a el libre:

document.getElementById("HeaderTable").style.width = document.getElementById("main").clientWidth ; 
document.getElementById("tar1").style.width = document.getElementById("org1").clientWidth ; 
document.getElementById("tar2").style.width = document.getElementById("org2").clientWidth ; 
document.getElementById("tar3").style.width = document.getElementById("org3").clientWidth ; 
document.getElementById("tar4").style.width = document.getElementById("org4").clientWidth ; 

1ra línea corrige el ancho de la tabla, luego se completa columna por columna. Usar .clientWidth es importante, porque .style.width envía un porcentaje si es lo que se aplica en la columna gobernada.

Esto estaba casi funcionando, pero no del todo. La tabla tenía un diseño similar, pero cambiada por unos pocos píxeles. Ya que sólo necesitaba que estar trabajando en IE, aunque yo podía mover eso con valores fijos, para estar lo más cerca posible, ya que lo que quería, así que cambiar el código para:

document.getElementById("tar1").style.width = document.getElementById("org1").clientWidth - 9; 
document.getElementById("tar2").style.width = document.getElementById("org2").clientWidth ; 
document.getElementById("tar3").style.width = document.getElementById("org3").clientWidth - 10; 
document.getElementById("tar4").style.width = document.getElementById("org4").clientWidth - 10; 

supongo que los valores podría ser diferente para una tabla diferente. Pero lo que me sorprendió es que funciona en todos los navegadores principales, independientemente del nivel de zoom

El cambio de tamaño de ventanas rompe la alineación, por lo que debe vincular la función a este evento.Además, esta solución ya no funciona en el tamaño extremo de la tabla

Aquí hay un jsfiddle, ya que se trata de CSS. por el momento no funciona en el zoom, porque mi encabezado flotante no se adhiere a right: 0px, no sé por qué todavía

Answer 4

Bueno, con este simple fragmento de HTML puedes hacerlo. Bueno, en mi caso yo estaba creando archivos PDF desde HTML, así que esta solución funcionó para mí. Espero que ayude a alguien más.

<table border=0> 
    <tr> 
    <td> 
     <!--Insert table 1 --> 
    </td> 
    <td> 
     <!--Insert table 2 --> 
    </td> 
    </tr> 
</table>