对齐2个表格列宽度彼此

Question

我有两个表在另一个之上，我想对齐他们的列宽相互之间，有没有办法做到这一点？试图固定工作台山坳宽度等没有喜悦

您可以在小提琴看到列稍微偏离彼此 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元素用于科学数据，例如来自实验的探针，而不是实际布局：

表格不应纯粹用作布局文档内容的手段，因为这可能会导致在渲染到非可视媒体时出现问题。此外，当与图形一起使用时，这些表格可能会强制用户水平滚动以查看在具有较大显示器的系统上设计的表格。为了尽量减少这些问题，作者应该使用样式表来控制布局而不是表格。

虽然您没有使用它们进行布局，但您的问题其实是渲染/布局问题。最简单的解决方案是merge both tables into one (jsfiddle)。

如果您希望将数据封装在许多小表中而不是一个巨大的表中，则需要为几乎所有列指定宽度。

Answer 2

为什么不把它们放在同一个表中？看起来它们在语义上相似。 http://jsfiddle.net/askhe/5/

Answer 3

虽然我同意合并表中的解决方案是最好的，最简单的一种在许多情况下，我来到了需要真有这2个具有相同列单独的表（做一个表固定和第二滚动）

实现这一点，我声明2代表用相同的列数，一个具有宽度规则（％和PX），一个没有

然后，使用Javascript，我所施加的排除表的宽度免费的：

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 ; 

第一行修复表格宽度，然后逐列完成。使用.clientWidth非常重要，因为.style.width发送一个百分比（如果它是在规则列上应用的）。

这几乎工作，但不完全。表格有类似的布局，但移动了几个像素。由于我只需要，要在IE中工作，我虽然我可以移动与固定值，要尽可能接近为我想要的东西，所以我我的代码更改为：

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; 

我猜值对于不同的表格可能会有所不同。但令我感到惊讶的是，它在每个主要浏览器中都有效，而且与缩放级别无关，因此您需要将该函数绑定到此事件。此外，此解决方案不再适用于表格的极端大小

这是一个jsfiddle，因为涉及到一些CSS。目前它不适用于缩放，因为我的浮动头不会坚持到right: 0px，不知道为什么

Answer 4

那么，使用这个简单的HTML片段，你可以做到这一点。在我的情况下，我是从HTML创建PDF的，所以这个解决方案为我工作。希望它能帮助别人。

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