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来反映高度。尽管有了一点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())
  })
})

什么时候加载您的内容？这不是动态解决方案，只会反映首次加载时的高度。如果您的内容是动态变化的，则必须重新运行此修复程序或为数据更改的时间设置侦听器，并使其自动发生。

滚动表格时的两个固定列

1 个答案: