使行高适应具有固定列的第一个元素

Question

我有一个 table 有一个固定的列和其余的 overflow-x。它运行良好，但行高不适应固定值...

在 CSS 中添加一个固定高度解决它，但我不能这样做，因为我的第一个元素来自数据库，我不知道它们有多大。

有人知道如何解决这个问题吗？

.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，它会根据第一行的高度为所有行设置相同的高度。或者在服务器端，您可以检查第一列的字符串有多长，并使用特定的 class（双倍高度）呈现 table 行。但是我建议给第一列足够的宽度。

使行高适应具有固定列的第一个元素

Adapt rows height to first element with fixed column

html

css

html-table