В заголовке таблицы не отображаются столбцы шириной 100%.

Question

Я пытаюсь сделать таблицу с полосой прокрутки в теле моего стола. Я сделал код ниже для этого. Полоса прокрутки работает просто отлично, проблема в том, что для thead столбцы не отображаются с правильным (выглядят намного меньше, чем для tbody (который использует 100% ширины). Любая идея, почему она работает для тела, но не заголовок?

<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>

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>