将行高调整为固定列的第一个元素

Question

我有一个固定列和其余溢出-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>

Answer 1

您可以编写JavaScript，将放在同等的高度，以基于第一排的高度都行。或者在服务器端，您可以检查第一列的字符串有多长，并且渲染具有特定类（双高度）的表行。不过，我会建议给第一列足够的宽度。