滚动表格时的两个固定列

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())
})
})

您的内容何时加载？这不是动态解决方案，只会反映首次加载时的高度。如果您的内容动态更改，则必须重新运行此修复程序或设置侦听器，以便在数据更改时自动发生。