我有两个表一个在另一个上面,我想将它们的列宽完全相互对齐,有没有办法做到这一点？尝试固定表格col宽度等没有喜悦
你可以看到小提琴彼此略微偏离
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%;}
解决方法
用于科学数据的表格元素,例如实验探针,而不是实际布局：
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally,when used with graphics,these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems,authors should use style sheets to control layout rather than tables.
虽然您没有将它们用于布局,但您的问题实际上是渲染/布局问题.最简单的解决方案是merge both tables into one (jsfiddle).
如果您希望将数据封装在许多小表而不是一个巨型表中,则需要为几乎所有列指定宽度.
