我有一个表,其中有一个固定列,其余列为 overflow-x。它运行良好,但行高不适应固定值...
在 CSS 中添加固定高度可以解决它,但我不能这样做,因为我的第一个元素来自数据库,我不知道它们有多大。
有人知道如何解决这个问题吗?
这是我的代码:http://jsfiddle.net/DJqPf/1371/
.table-wrapper {
overflow-x: scroll;
overflow-y: visible;
width: 250px;
margin-left: 120px;
}
td,
th {
padding: 5px 20px;
width: 100px;
}
th:first-child {
position: fixed;
left: 5px
}
<div class="table-wrapper">
<table id="consumption-data" class="data">
<thead class="header">
<tr>
<th>Month</th>
<th>Item 1</th>
<th>Item 2</th>
<th>Item 3</th>
<th>Item 4</th>
</tr>
</thead>
<tbody class="results">
<tr>
<th>Jan too much content here</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>Feb</th>
<td>3163</td>
<td>3163 content here is ok</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>Mar</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>Apr</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>May</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>Jun</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
最佳答案
您可以编写 JavaScript,根据第一行高度为所有行设置相同的高度。或者在服务器端,您可以检查第一列的字符串有多长,并呈现具有特定类(双高)的表行。但是我建议给第一列足够的宽度。
关于html - 使行高适应具有固定列的第一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29823952/