Question

请建议如何锁定表格中的标题而不是滚动。找到示例代码：http://jsfiddle.net/7t9qkLc0/14/。我想锁定Column1和Column2标题，这样当我们向下滚动查看数据时，表头仍然可见。提前谢谢。我的HTML代码：

<div id="test" style="float: left; border: 0px solid #99ffff;">
<table cellpadding="2px" cellspacing="2px" style="border: 0px solid #ffffff; margin-right: 15px; margin-bottom: 20px;">
<tr>
<td> 
<table cellpadding="2px" cellspacing="2px" style="border: 2px solid #657383; margin-bottom: 15px;" width="300px">
 <tr>
<td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px">

<table width="300px" border="1" class="newTable">
    <tr>
<th>Column1</th>
<th>Column2</th>
</tr>
<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;1</td>
<td class="rowStyle">data1  </td></tr>

<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;2</td>
<td class="rowStyle">data2</td></tr>

<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;3</td>
<td class="rowStyle">data3</td></tr>
    <tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;1</td>
<td class="rowStyle">data1  </td></tr>

<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;1</td>
<td class="rowStyle">data1  </td></tr>

<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;2</td>
<td class="rowStyle">data2</td></tr>

<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;3</td>
<td class="rowStyle">data3</td></tr>
<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;3</td>
<td class="rowStyle">data3</td></tr>
</table></td></tr>


</table>
</td>
</tr>
</table>
</div>

Answer 1

您必须将标题放在单独的表格中并在其上放置固定位置。看看这个。

http://jsfiddle.net/7t9qkLc0/47/

<table width="290px" border="1" class="newTable">
    <tr>
        <th>Column1</th>
        <th>Column2</th>
     </tr>
</table>
<table style="margin-top:25px">
<tr> ....

Answer 2

试试这样：

在HTML中更改了这个：

<th>Column1
  <div>Column111</div>
</th>
<th>Column2
  <div>Column222</div>
</th>

（div是新的）

并添加此CSS：

th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: blue;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  line-height: normal;
  border-left: 1px solid #800;
}

注意：css有点粗糙，但有一点造型会看起来更好

FIDDLE

另一种方法是将标题与表格分开，并使它们成为2个元素。

Answer 3

你可以指定位置：固定;属性为th样式，然后将其设置为适合表格，以便定位和重叠是正确的。

th {
    position: fixed;
}

我也刚刚找到这个链接来回答你的问题http://jsfiddle.net/T9Bhm/7/

HTML表标题无需滚动即可修复

3 个答案: