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

JsFiddle URL: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>

列未与标题对齐。
我希望用于数据的表与标题对齐。
第二个表的tdwidth=100px不工作。

最佳答案

我将去掉嵌套表，并根据w3c规范使用table元素的语义。诀窍是使用正确的元素，但要控制浏览器显示它们的方式。<table>、<thead>和<tbody>可以显示为块元素，而每一行可以是一个表（默认情况下，<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>

在css中设置显示属性，并在<tbody>上设置溢出：

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

返回到列宽的问题。没有其他方法可以解决这个问题，只需在每个表中的每个单元格上设置相同的宽度（<tr>）。在小提琴上我把它设为33.33%：

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

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

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

关于html - 将可滚动表格列与CSS中的标题对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30079298/