有人可以根据colgroup中的％s来建议列没有调整大小的原因吗？
问题：制作50％第一列25％第二列和第三列。在tbody上保留显示块时，我们在主体上滚动而不是在整个表格上滚动。解决方案：保留下面的所有代码，但使用td：nth-child属性手动设置％width而不是使用colgroup（因为它要求显示不是块而是table-row-group）。 < / p>
我尝试使用'3 *'，'1 *'，'1 *'作为col宽度，但无济于事。我认为必须要做的事情是我将表放在div容器中或者由于display：block属性，也许它必须是display：table。但是当我显示：table，那么table只占用容器空间的50％并浮动到左边，列的宽度仍然相等。谢谢你的帮助！
编辑：我也在桌面上试过style="width: 100%"。
编辑修改：从display:block删除.fixed_header thead tr，.fixed_header tbody修复了标题问题。此外，在width:100%中设置.fixed_header th, .fixed_header td几乎可以修复它，但它有点错误。
.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>
答案 0 :(得分：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这里
display: table;
display: table-cell;
display: table-column;
display: table-colgroup;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
display: table-row;
display: table-caption;
答案 1 :(得分：0)
<table style="width: 100%">
<colgroup>
<col span="1" style="width: 50%;">
<col span="1" style="width: 25%;">
<col span="1" style="width: 25%;">
</colgroup>
<!-- Put <thead>, <tbody>, and <tr>'s here! -->
<tbody>
<tr>
<td style="background-color: #777">50%</td>
<td style="background-color: #aaa">25%</td>
<td style="background-color: #777">25%</td>
</tr>
<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>
试试这个！我希望这有帮助。为我工作。
答案 2 :(得分：0)
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="table-container">
<table class="fixed_header" style="width: 100%;">
<thead>
<tr>
<th style="width: 50%;">Factor</th>
<th style="width: 25%;">y_i</th>
<th style="width: 25%;">F_i Factor </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>
</body>
</html>
答案 3 :(得分：0)
请添加此CSS： 为我工作
* {text-align：left; } 表{宽度：100％;最大宽度：600px; }