將行高調整爲固定列的第一個元素

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，將放在同等的高度，以基於第一排的高度都行。或者在服務器端，您可以檢查第一列的字符串有多長，並且渲染具有特定類（雙高度）的錶行。不過，我會建議給第一列足夠的寬度。