表格不会填充 100% 的 Div。 Thead、Tbody、Table 全部填充 100%。 td 和 th 不会答案

【问题标题】：Table will not fill 100% of the Div. Thead, Tbody, Table all fill 100%. td and th won't表格不会填充 100% 的 Div。 Thead、Tbody、Table 全部填充 100%。 td 和 th 不会
【发布时间】：2020-12-14 23:58:50
【问题描述】：

我已经尝试了其他类似问题的所有内容，但没有任何效果，但我无法让我的 th 和 td 填充表格宽度。

表格占据了包含 div 的 100% 宽度。 Thead 占 100%。 Tbody 占 100%。 Tr占100%。

但第 4 列和第 td 列只会占用大约 50% 的宽度。

我已将它们设置为 25%，因为我一直认为 4 x 25% 加起来等于 100%，但显然不是在 CSS 中。

我尝试在不同的地方添加显示块并尝试了很多其他的东西，但没有任何效果。

这就是我所做的：

.booktable {
  width: 100%;
  overflow-y: scroll; 
  height: 55vh;
  display: inline-block;
}

.booktable thead {
    width: 100%;
    display: inline-block;
} 

.booktable tbody {
  width: 100%;
  display: block;
} 

.booktable tr{
  width: 100%;
  display: block;
}

.booktable th{
  width: 25%;
  color: grey;
  padding: 1vh;
  font-size: 2vh;
  border-bottom: 1px solid grey;
  font-weight: bold;
  position: sticky; 
  top: 0;
  background-color: white;
}


.booktable td{
  width: 25%;
  font-size: 2.5vh;
  text-align: center;
  padding: 2vh;
  color: grey;
}

<table class="booktable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Category</th>
      <th>Group</th>
      <th>Balance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Name</td>
      <td>Cat</td>
      <td>Group</td>
      <td>Balance</td>
      </tr>
  </tbody>
</table>

一直在尝试显示内联块、块和位置绝对值、相对值、表格布局、删除填充......没有任何效果。 td 甚至将宽度加倍至 200% 或 50%。

不想问什么必须是一个非常简单的答案，我已经尽可能多地尝试了，但我已经尝试了几个小时了！

非常感谢任何帮助。

【问题讨论】：

标签： html css

【解决方案1】：

您需要将表格width设置为100%，然后所有th,td将适应25%的总宽度。

下面是工作示例：

.booktable {
  width: 100%
}

.booktable th, .booktable td{
  width: 25%;
  color: grey;
  padding: 1vh;
  font-size: 2vh;
  border-bottom: 1px solid grey;
  font-weight: bold;
  position: sticky; 
  top: 0;
  background-color: white;
}


.booktable td{
  width: 25%;
  font-size: 2.5vh;
  text-align: center;
  padding: 2vh;
  color: grey;
}

<table class="booktable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Category</th>
      <th>Group</th>
      <th>Balance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Name</td>
      <td>Cat</td>
      <td>Group</td>
      <td>Balance</td>
      </tr>
  </tbody>
</table>

【讨论】：

【解决方案2】：

您正在覆盖所有特定于表格的显示模式，这就是让您遇到麻烦的原因，试试这个：

.booktable {
  width:100%;
  overflow-y: scroll; 
  height: 55vh;
  display: table;
}

.booktable thead {
    width: 100%;
    
} 

.booktable tbody {
  width: 100%;

} 

.booktable tr{
  width: 100%;
  
}

.booktable th{
  width: 25%;
  color: grey;
  padding: 1vh;
  font-size: 2vh;
  border-bottom: 1px solid grey;
  font-weight: bold;
  position: sticky; 
  top: 0;
  background-color: white;
}


.booktable td{
  width: 25%;
  font-size: 2.5vh;
  text-align: center;
  padding: 2vh;
  color: grey;
}

  <table class="booktable">
         <thead>
            <tr>
              <th>Name</th>
              <th>Category</th>
              <th>Group</th>
              <th>Balance</th>
            </tr>
         </thead>
         <tbody>
            <tr>
              <td>Name</td>
              <td>Cat</td>
              <td>Group</td>
              <td>Balance</td>
            </tr>
         </tbody>
    </table>

【讨论】：