html - 当我修复表头并使表体可滚动时，表头不遵循表体尺寸

Question

所以，基本上下图很容易描述我的问题。我需要的是将 thead header 与 tbody 单元格对齐，同时保持固定 header 的功能和 tbody 的滚动条。谁能帮我解决这个问题？

现在，如果您在 Codepen 上检查它，thead 的宽度与 tbody 相同，但不知何故 thead 中的单元格大小与 tbody 不同。

https://codepen.io/seva98/pen/qBZZrKG

.container {
  width: 600px
}

table {
  display: inline-grid;
  grid-template-areas: "head-fixed" "body-scrollable";
  width: calc(100%);
}

th,
td {
  width: 33%;
  padding: 2px 16px;
}

thead {
  grid-area: head-fixed;
}

tbody {
  grid-area: body-scrollable;
  overflow: auto;
  height: 200px;
}


/* width */

::-webkit-scrollbar {
  width: 10px;
}


/* Track */

::-webkit-scrollbar-track {
  background: #f1f1f1;
}


/* Handle */

 ::-webkit-scrollbar-thumb {
  background: #888;
}


/* Handle on hover */

 ::-webkit-scrollbar-thumb:hover {
  background: #555;
}

<div class="container">
  <table>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>0</td>
        <td>Short</td>
        <td>Loooooooooong text</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Short</td>
        <td>Loooooooooong text</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Short</td>
        <td>Loooooooooong text</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Short</td>
        <td>Loooooooooong text</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Short</td>
        <td>Loooooooooong text</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Short</td>
        <td>Loooooooooong text</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Short</td>
        <td>Loooooooooong text</td>
      </tr>
      <tr>
        <td>7</td>
        <td>Short</td>
        <td>Loooooooooong text</td>
      </tr>
      <tr>
        <td>8</td>
        <td>Short</td>
        <td>Loooooooooong text</td>
      </tr>
      <tr>
        <td>9</td>
        <td>Short</td>
        <td>Loooooooooong text</td>
      </tr>
      <tr>
        <td>10</td>
        <td>Short</td>
        <td>Loooooooooong text</td>
      </tr>
      <tr>
        <td>11</td>
        <td>Short</td>
        <td>Loooooooooong text</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

为 td,th 设置最小宽度，并使其左对齐

将此添加到 td,th

  th,td {
       text-align: left;
       min-width:100px;
  }

而不是使用

th,td {
    width: 33%;
}

试试这个密码笔:https://codepen.io/Rayeesac/pen/mdPPwgg

有关更多信息，请尝试:Why width property doesn't work on my table?