css - thead 的宽度不同于 tbody

Question

我需要一个带滚动条的 tbody 而 thead 不应该有滚动条。因此，在这样做时，thead 的宽度会减小到 thead 中文本的大小。

有没有办法让广告的宽度大小与主体的宽度大小相同

这是我的。 https://jsfiddle.net/Viraj173/jqwgkq8k/

CSS

tbody.scroll{
  overflow-y: auto;
  height:100px;        
 position: absolute;
}

th {
    color: #ffffff;
    background: #373d49;
    padding: 5px;
    text-align: left;
    font-size: 14px;
}

HTML

<table >
  <thead>
      <tr>
        <th>
          Value
        </th>
      </tr>                             
  </thead>
  <tbody class="scroll">
    <tr>
      <td>
        Setting Value 1
      </td>
    </tr>
    <tr>
      <td>
        Setting Value 1
      </td>
    </tr>
    <tr>
      <td>
        Setting Value 1
      </td>
    </tr>
    <tr>
      <td>
        Setting Value 1
      </td>
    </tr>
    <tr>
      <td>
        Setting Value 1
      </td>
    </tr>
    <tr>
      <td>
        Setting Value 1
      </td>
    </tr>
    <tr>
      <td>
        Setting Value 1
      </td>
    </tr>
    <tr>
      <td>
        Setting Value 1
      </td>
    </tr>
    <tr>
      <td>
        Setting Value 1
      </td>
    </tr>

  </tbody>
</table>

Answer 1

使用这个:

 th {
    color: #ffffff;
    background: #373d49;
    padding: 5px;
    padding-right:100px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    font-size: 14px;
}