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>

列未与标题对齐。

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

第二个表的

width=100px无效。

Answer 1

我会摆脱嵌套表，并根据w3c规范使用表元素的语义。诀窍是使用正确的元素，但操纵浏览器显示它们的方式。 <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>

使用<tbody>上的溢出设置css中的显示属性：

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;
}

Answer 2

并不是“列没有与标题对齐”，问题是你的第二个表没有任何标题。你只有嵌套表。一个包含标题th，第二个没有标题，只有td。

基本上，您的th与td

不在同一列中

因此，即使宽度相同，两个表也将根据内部的内容调整单元格的宽度。只是你的所有td都有相同的内容（字符数），所以效果是它们略微错位。

但是，如果您为th和td设置固定宽度并将其显示为“线块”元素，则会对齐： FIDDLE

但是我不建议改变纯html表格上单元格的显示。你可能会头疼。（而且我也不建议使用嵌套表格......当布局以这种方式制作时，我有这么多头痛...... ty explorer）

Answer 3

折叠边框：border-collapse: collapse;并设置box-sizing: border-box;

http://jsfiddle.net/gfy4pwrr/6/

* {
  box-sizing: border-box;
}
table {
  border-collapse: collapse;
}
td, th {
  /* if it is 100px the overflow content in the first column "push" the border ?? */
  width: 99px;
  max-width: 99px;
  overflow: hidden;
}

<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>VeryOverflowContent long long long content</td>
            <td>OverflowContent</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>

Answer 4

我邀请你想要一个固定的标题表。我建议你改变你的html以轻松构建一个固定的标题表。这是我的建议：

<div class="table-header">
    <table>
        <thead>
             <tr>
            <th>Full Name</th>
            <th>Status</th>
            <th>Last reported</th>
         </tr>
        </thead>
    </table>
</div>
<div class="table-content">
 <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>
           <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>

    </tbody>
    </table>
</div>

和css：

.table-header
{    padding-right:13.5px;

}
.table-header table
{
    height:20px;
}
.table-header thead tr
{

     background:#fff;
    z-index:10000;

}
.table-content
{
    max-height:250px;
    overflow-y:auto;
    overflow-x:hidden;
    margin-top:-20px;

}

.table-content thead
{
    visibility:collapse;
}
table
{
     border-collapse: collapse;
}
table th, td
{
     border: 1px solid black;
    width:200px;
    text-align:center;
    padding:0;
}

看看：http://jsfiddle.net/chuongxl/gfy4pwrr/51/

或者您可以使用此插件http://www.fixedheadertable.com/

将可滚动表列与css中的标题对齐

4 个答案: