html - 将可滚动表格列与CSS中的标题对齐

Question

JsFiddle 网址:http://jsfiddle.net/gfy4pwrr/1

<table cellspacing="0" cellpadding="0" border="0" width="325" >
  <tr>
    <td>
       <table cellspacing="0" cellpadding="1" border="1" width="300" >
         <tr>
            <th>Full Name</th>
            <th>Status</th>
            <th>Last reported</th>
         </tr>
       </table>
    </td>
  </tr>
  <tr>
    <td>
       <div class ='cont' style="width:325px; height:48px; overflow:auto;">
         <table class='data' cellspacing="0" cellpadding="1" border="1" width="300"  >
           <tr>
             <td>col 1 data 1</td>
             <td>col 2 data 1</td>
             <td>col 3 data 1</td>
           </tr>
           <tr>
             <td>col 1 data 2</td>
             <td>col 2 data 2</td>
             <td>col 3 data 2</td>
           </tr>
           <tr>
             <td>col 1 data 3</td>
             <td>col 2 data 3</td>
             <td>col 3 data 3</td>
           </tr>
         </table>  
       </div>
    </td>
  </tr>
</table>

列与标题不对齐。

我希望用于数据的表格与标题对齐。

第二个表的 td width=100px 不工作。

Answer 1

我会摆脱嵌套表格并根据 w3c 规范使用表格元素的语义。诀窍是使用正确的元素，但操纵浏览器显示它们的方式。 <table> , <thead>和 <tbody>可以显示为 block 元素，而每一行都可以是一个表格(保留 <td> 和 <th> 默认显示为表格单元格)。

我已经在 JSFiddle 中展示了它.但它基本上归结为一个简单的表结构:

<table>
    <thead>
        <tr>
            <th>Full Name</th>
            <th>Status</th>
            <th>Last reported</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>col 1 data 1</td>
            <td>col 2 data 1</td>
            <td>col 3 data 1</td>
        </tr>
    </tbody>
</table>

并在 <tbody> 上设置溢出的 css 显示属性:

table, tbody, thead {
    display: block;
}
tbody, thead {
    overflow-y: scroll;
}
tbody {
    height: 100px;
}
tr {
    display: table;
    ...
}

回到列宽的问题。除了在每个表中的每个单元格上设置相同的宽度 ( <tr> ) 之外，没有其他方法可以解决这个问题。在 fiddle 中，我将其设置为 33.33%:

td , th {
    width: 33.33%;
    ...
}

对于 Windows，有必要在 <thead> 中显示滚动条否则它的大小与 <tbody> 不同.要隐藏它，有一个小技巧:

thead {
    margin-right: -300px;
    padding-right: 300px;
}