html – 将2个表的列宽相互对齐

概述我有两个表一个在另一个上面,我想将它们的列宽完全相互对齐,有没有办法做到这一点？尝试固定表格col宽度等没有喜悦 你可以看到小提琴彼此略微偏离 http://jsfiddle.net/askhe/ HTML <table class="tblresults txtblack"> <tr class="tblresultshdr bold"> 我有两个表一个在另一个上面,我想将它们的列宽完全相互对齐,有没有办法做到这一点？尝试固定表格col宽度等没有喜悦

你可以看到小提琴彼此略微偏离
http://jsfiddle.net/askhe/

HTML

<table >                            <tr >                                <td >Company</td>                                <td>Currency</td>                                <td>BID</td>                                <td>Ask</td>                                <td>YTD Vol</td>                            </tr>                            <tr>                                <td >ABC</td>                                <td>GBP</td>                                <td>94</td>                                <td>16</td>                                <td>3,567,900</td>                            </tr>                            <tr>                                <td >DEF</td>                                <td>GBP</td>                                <td>3</td>                                <td>46</td>                                <td>10,000</td>                            </tr>                            <tr>                                <td >GHI</td>                                <td>GBP</td>                                <td>3</td>                                <td>46</td>                                <td>10,000</td>                            </tr>                            <tr>                                <td >JKLM</td>                                <td>GBP    </td>                                <td>7</td>                                <td>46</td>                                <td>56,000</td>                            </tr></table>                        <table >                            <tr>                                <td colspan="5"  >Investments</td>                            </tr>                            <tr>                                <td >ghjk</td>                                <td>GBP</td>                                <td>13</td>                                <td>6</td>                                <td>130,000</td>                            </tr>                            <tr>                                <td >asdsa</td>                                <td>GBP</td>                                <td>120</td>                                <td>46</td>                                <td>16,000</td>                            </tr>                            <tr>                                <td >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).

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

总结

以上是内存溢出为你收集整理的html – 将2个表的列宽相互对齐全部内容，希望文章能够帮你解决html – 将2个表的列宽相互对齐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。