这是我在 HTML 中的表格:
<div class="outer">
<div class="inner">
<table>
<tr>
<th >Header A</th>
<td style="position:absolute; " >col 1 - A</td>
<td >col 2 - A (COVER CONTENT)</td>
<td >col 3 - A</td>
<td >col 4 - A</td>
<td >col 5 - A</td>
<td >col 6 - A</td>
<td >col 7 - A</td>
<td >col 8 - A</td>
</tr>
<tr>
<th>Header B</th>
<td >col 1 - B</td>
<td>col 2 - B</td>
<td>col 3 - B</td>
<td>col 4 - B</td>
<td>col 5 - B</td>
<td>col 6 - B</td>
<td>col 7 - B</td>
<td>col 8 - B</td>
</tr>
<tr>
<th>Header C</th>
<td>col 1 - C</td>
<td>col 2 - C</td>
<td>col 3 - C</td>
<td>col 4 - C</td>
<td>col 5 - C</td>
<td>col 6 - C</td>
<td>col 7 - C</td>
<td>col 8 - C</td>
</tr>
</table>
</div>
</div>
和 CSS:
<style>
table {
table-layout: fixed;
width: 100%;
*margin-left: -100px;/*ie7*/
}
td, th {
vertical-align: top;
border-top: 1px solid #ccc;
padding:10px;
width:100px;
}
th {
position:absolute;
left:0;
width:100px;
}
.outer {position:relative}
.inner {
overflow-x:scroll;
overflow-y:visible;
width:400px;
margin-left:100px;
}
</style>
我在保持标签<th>
冻结时做得很好,但我想通过在标签中添加style="positon:absolute;"
来保持内容为"col 1 - A"的可见标签<td>
<td>
。 它保留,但其他<td>
的内容覆盖它,这意味着"Col 2 - A(封面内容)"和"Col 1 - A"在同一单元格中相互覆盖。
p.s.:如果我有标签<td rowspan="2">
我如何在此标签中设置位置:绝对?我试图将其添加到<td>
但它只保留一行......需要帮助....
试试这个
<td ><div style="position:fixed;background-color: white;width:inherit" >col 1 - A</div></td>
这是演示:JSFIDDLE