我想修复表格的第一列,但我有一个问题,如果第一列的高度比其他列高,那么其他列的高度就不一样了。
这是我的代码:
<div class="outer">
<div class="inner">
<table>
<tr>
<th>Header A</th>
<td>col 1 - A</td>
<td>col 2 - A (WITH LONGER CONTENT)</td>
<td>col 3 - A</td>
<td>col 4 - A</td>
<td>col 5 - 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>
</tr>
<tr>
<th>Header C
Header C
Header C
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>
</tr>
</table>
</div>
</div>
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;
}
.outer {position:relative}
.inner {
overflow-x:scroll;
overflow-y:visible;
width:400px;
margin-left:100px;
}
这是一个例子;我该如何解决?
http://jsbin.com/uxecel/4457/edit
我希望行高在所有行中都相同,而不是固定的,因为这是动态的。
谢谢
最佳答案
你是这个意思吗?
http://jsfiddle.net/AlexCharlton/5d4yqn7a/1/
添加:
height: 80px;
收件人:
td, th {
vertical-align: top;
border-top: 1px solid #ccc;
height: 80px;
padding:10px;
width:100px;
}
或者,他们是这种方法,您可以在其中将类应用于特定的行/列,如下所示。
http://jsfiddle.net/AlexCharlton/5d4yqn7a/2/
HTML:
<td class = "Long">col 2 - A (WITH LONGER CONTENT)</td>
CSS:
td.Long {
width: 280px;
}
关于html 修复第一列和相同高度的其他列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25351540/