我想要修复表格的第一列,但是我有一个问题,即如果第一列的高度高于其他列,则其他列的高度不同。
这是我的代码:
<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
我希望行高在所有行中都相同,而不是固定,因为这是dinamic。
由于
答案 0 :(得分:0)
你是说这个吗?
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;
}