滚动时的两个固定列 table

Question

我有以下代码：

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;
  *position: relative; /*ie7*/
/*  left:0; */
  width:100px;
}
.hard_left {
  position:absolute;
  *position: relative; /*ie7*/
  left:0; 
  width:100px;
}
.next_left {
  position:absolute;
  *position: relative; /*ie7*/
  left:100px; 
  width:100px;
}
.outer {position:relative}
.inner {
  overflow-x:scroll;
  overflow-y:visible;
  width:400px; 
  margin-left:200px;
}

<div class="outer">
  <div class="inner">
    <table>
        <tr>
          <th class="hard_left">Header A</th>
          <th class="next_left">Header B</th>
          <th>Header C</th>
          <th>Header D</th>
          <th>Header E</th>
          <th>Header A</th>
          <th>Header B</th>
          <th>Header C</th>
          <th>Header D</th>
          <th>Header E</th>
        </tr>
        <tr>
          <td class="hard_left">col 1 - A</td>
          <td class="next_left">col 2 - A Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim tristique, mollis platea aenean netus sociosqu erat ornare fusce, habitasse bibendum euismod rutrum vivamus arcu scelerisque varius. Nascetur convallis porta semper dui cum ut lacinia, placerat hendrerit tempor mattis at risus quis et</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
          <td>col 1 - A</td>
          <td>col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
        </tr>
        <tr>
          
          <td class="hard_left">col 1 - B</td>
          <td class="next_left">col 2 - B</td>
          <td>col 3 - B</td>
          <td>col 4 - B</td>
          <td>col 5 - B</td>
          <td>col 1 - A</td>
          <td>col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
        </tr>
        <tr>
          
          <td class="hard_left">col 1 - C</td>
          <td class="next_left">col 2 - C</td>
          <td>col 3 - C</td>
          <td>col 4 - C</td>
          <td>col 5 - C</td>
          <td>col 1 - A</td>
          <td>col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
        </tr>
        <tr>
          <td class="hard_left">col 1 - A</td>
          <td class="next_left">col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
          <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>
        </tr>
        <tr>
          <td class="hard_left">col 1 - A</td>
          <td class="next_left">col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
          <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>
        </tr>
        <tr>
          <td class="hard_left">col 1 - A</td>
          <td class="next_left">col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
          <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>
        </tr>
        <tr>
          <td class="hard_left">col 1 - A</td>
          <td class="next_left">col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
          <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>
        </tr>
    </table>
  </div>
</div>

我需要做的是能够调整 table 右侧每一行的高度（未固定的）与左侧的每一行（那些是固定的）。

目前，如果我向其中一个固定的列添加大量内容，容器列不会增加其高度，并且会失去与右侧最近列的高度匹配。

Answer 1

这里的主要问题是，将第一列设置为绝对值会使它们脱离页面流，因此很难使用 css 反映高度。使用一点点 jquery 虽然您可以获取特定的单元格高度并将其镜像到同一行中的所有其他单元格。例如：

$(document).ready(function() {
  //Find the cell with the height you want to mirror
  $("table .next_left").each(function() {
      //Propogate the desired height to all the other cells on the current row
      $(this).closest("tr").find("td").height($(this).height())
  })
})

您的内容何时加载？这不是动态解决方案，只会在第一次加载时反映高度。如果您的内容动态变化，您将不得不重新运行此修复或设置一个侦听器以在数据变化时自动发生。

滚动时的两个固定列 table

Two fixed columns when scrolling a table

css

html-table

css-position