css - 滚动表格时的两个固定列

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>

我需要做的是能够将表格右侧(未固定的那一行)的每一行的高度与左侧的每一行(那些固定的那些)相适应。

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

Answer 1

这里的主要问题是，将第一列设置为绝对值会使它们脱离页面流，因此很难使用 css 来反射(reflect)高度。使用一点点 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())
  })
})

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