Question

这是我在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>冻结时工作得很好，但我想通过在<td>标记中添加style="positon:absolute;"来保持标记为<td>的内容为“col 1 - A” 。它保留，但另一个<td>的内容覆盖它，这意味着“col 2 - A（封面内容）”和“col 1 - A”在同一个单元格中相互覆盖。

p.s。：如果我有标签<td rowspan="2">，我如何在此标签中设置position：absolute？我试图将它添加到<td>但它只保留一行.... 需要帮助......

Answer 1

试试这个

<td ><div style="position:fixed;background-color: white;width:inherit" >col 1 - A</div></td>

以下是演示：JSFIDDLE

滚动时，保持特定标记td始终可见

1 个答案: