html - 表格标题未以 100% 宽度显示列

Question

我正在尝试在我的表格主体中制作一个带有滚动条的表格。我已经为它制作了下面的代码。滚动条工作得很好，问题是对于thead，列没有正确显示（看起来比tbody小很多（使用100％的宽度）。知道为什么它适用于body但不适用标题？

<table style="width:100%;">
  <thead style="width:100%;display:block;"> 
    <tr>
      <th style="width:70%;">Description</th>
      <th>Task appears on</th>
    </tr>
  </thead>
  <tbody style="width:100%; height:300px;overflow-y:scroll;display:block;">
    <tr>
      <td style="width:70%;">Test1</td>
      <td> Test2</td>
    </tr>
  </tbody>
</table>

<table class="dash-task-list" style="width:100%;"><thead style="width:100%; display:block;"> <tr><th class="dash_description" style="width:70%;">Description</th><th class="dash_tasks_appear">Task appears on</th></tr></thead><tbody style="width:100%; height:300px; overflow-y:scroll; display:block;"></tbody></table>

标签： htmlcss

Answer 1

更新

这将解决你的问题..祝你好运

.first-td{
  width:70%
}

.second-td{
  width:30%
}

tbody tr{
  display: flex
}

<table style= "width:100%">
  <thead>
    <tr >
      <th class="first-td">Col 1</th>
      <th class="second-td">Col 2</th>
    </tr>
  </thead>
  <tbody style="display:block; width:100%; position:fixed; overflow: auto; height: 100px;">
    <tr>
      <td class="first-td">row 2-0</td>
      <td class="second-td">row 2-1</td>
    </tr>
    <tr>
      <td class="first-td">row 2-0</td>
      <td class="second-td">row 2-1</td>
    </tr>
    <tr>
      <td class="first-td">row 2-0</td>
      <td class="second-td">row 2-1</td>
    </tr>
    <tr>
      <td class="first-td">row 2-0</td>
      <td class="second-td">row 2-1</td>
    </tr>
    <tr>
      <td class="first-td">row 3-0</td>
      <td class="second-td">row 3-1</td>
    </tr>
    <tr>
      <td class="first-td">row 4-0</td>
      <td class="second-td">row 4-1</td>
    </tr>
    <tr>
      <td class="first-td">row 5-0</td>
      <td class="second-td">row 5-1</td>
    </tr>
    <tr>
      <td class="first-td">row 6-0</td>
      <td class="second-td">row 6-1</td>
    </tr>
  </tbody>
</table>