当我修复表头并使正文可滚动时，表头不遵循表体尺寸答案

【问题标题】：Table header doesn't follow table body dimensions when I fix table header and make body scrollable当我修复表头并使正文可滚动时，表头不遵循表体尺寸
【发布时间】：2020-08-15 09:09:10
【问题描述】：

所以，基本上下面的图片很容易描述我的问题。我需要的是 thead 标题与 tbody 单元格对齐，同时保持固定标题的功能和 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>

【问题讨论】：

如果使用这种风格的表格table {display: table; text-align: left;}会解决你的问题
@Ramineghbalian 不会因为你会失去固定的标题+滚动功能，只需在 codepen 链接中尝试一下

标签： html css

【解决方案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?

【讨论】：