html - 表未根据 colgroup 中的 % 调整列的大小

Question

有人可以建议为什么列没有根据它们在 colgroup 中的 %s 调整大小吗？

问题:让第一列占 50%，第二列和第三列占 25%。同时在 tbody 上保留显示 block ，这样我们就可以在 body 上滚动而不是整个表格。解决方案:保留下面的所有代码，但使用 td:nth-child 属性手动设置 % 宽度而不是使用 colgroup(因为它要求显示不是 block 而是表行组)。

我也尝试过使用 '3*','1*','1*' 作为列宽度，但无济于事。我认为这一定与我将表格放在 div 容器中或由于 display:block 属性有关，也许它必须是 display: table。但是当我显示:表格时，表格只占用容器空间的 50% 并向左浮动，列仍然具有相同的宽度。感谢您的帮助!

编辑:我还在 table 上尝试了 style="width: 100%"。

编辑 编辑:从 .fixed_header thead tr 和 .fixed_header tbody 中删除 display:block 修复了 header 的问题。此外，在 .fixed_header th, .fixed_header td 中设置 width:100% 几乎可以修复它，它有点错位。

.table-container {
    position: absolute;
    display: block;
    height: 94%;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    top: 15px;
}

// https://codepen.io/GhostRider/pen/GHaFw
.style-2::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

.style-2::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

.style-2::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #F4F7F7;
}

table, tbody {
    width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
    table-layout: fixed;
}

.fixed_header{
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.fixed_header tbody{
  display:block;
  width: 100%;
  overflow-y: auto;
  height: 90%;
}

.fixed_header thead tr {
   display: block;
   border-bottom: 1px solid black;
}

.fixed_header th, .fixed_header td {
  padding: 5px;
  text-align: left;
  width: 200px;
}

<div class="table-container">

                            <table class="fixed_header">
                              <colgroup style="width: 100%;">
                                  <col span="1" style="width: 50%;">
                                  <col span="1" style="width: 25%;">
                                  <col span="1" style="width: 25%;">
                              </colgroup>

                              <thead>
                                <tr>
                                  <th>Factor</th>
                                  <th>y_i</th>
                                  <th>F_i</th>
                                </tr>
                              </thead>

                              <tbody class="style-2">
                                <tr>
                                  <td>row 1-0</td>
                                  <td>row 1-1</td>
                                  <td>row 1-2</td>
                                </tr>
                                <tr>
                                  <td>row 2-0</td>
                                  <td>row 2-1</td>
                                  <td>row 2-2</td>
                                </tr>
                                <tr>
                                  <td>row 3-0</td>
                                  <td>row 3-1</td>
                                  <td>row 3-2</td>
                                </tr>
                                <tr>
                                  <td>row 4-0</td>
                                  <td>row 4-1</td>
                                  <td>row 4-2</td>
                                </tr>
                                <tr>
                                  <td>row 5-0</td>
                                  <td>row 5-1</td>
                                  <td>row 5-2</td>
                                </tr>
                                <tr>
                                  <td>row 6-0</td>
                                  <td>row 6-1</td>
                                  <td>row 6-2</td>
                                </tr>
                                <tr>
                                  <td>row 7-0</td>
                                  <td>row 7-1</td>
                                  <td>row 7-2</td>
                                </tr>
                              <tr>
                                  <td>row 7-0</td>
                                  <td>row 7-1</td>
                                  <td>row 7-2</td>
                                </tr>
                              <tr>
                                  <td>row 7-0</td>
                                  <td>row 7-1</td>
                                  <td>row 7-2</td>
                                </tr>
                              <tr>
                                  <td>row 7-0</td>
                                  <td>row 7-1</td>
                                  <td>row 7-2</td>
                                </tr>
                              </tbody>
                            </table>
                            </div>

Answer 1

删除以下类解决了问题。

table, tbody {
    width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
    table-layout: fixed;
}


.fixed_header tbody{
  display:block;
  width: 100%;
  overflow-y: auto;
  height: 90%;
}

.fixed_header thead tr {
   display: block;
   border-bottom: 1px solid black;
}

我看到 tbody 的默认显示 table-row-group 已替换为 display:inline-block 。我的猜测是下面看到的这些显示属性使元素表现得像表格及其子项，因此对它们应用表格分组规则。 Fiddle这里

显示:表格；
显示:表格单元格；
显示:表列；
显示:表列组；
显示:表头组；
显示:表行组；
显示:表页脚组；
显示:表行；
显示:表格标题；