Html 表未按colgroup中的%调整列的大小
有人能告诉我为什么列不根据它们在colgroup中的%s调整大小吗 问题：制作50%的第一列25%的第二列和第三列。在保留tbody上的显示块的同时，我们可以在body上滚动，而不是整个表。解决方案：保留下面的所有代码，但使用td:nth child属性手动设置%width，而不是使用colgroup（因为它要求显示的不是块而是表行组）。 我也尝试过使用“3*”、“1*”、“1*”作为列宽度，但没有效果。我认为这一定与我将表放在div容器中这一事实有关，或者由于display:block属性，可能它必须是display:table。但当我显示：table时，table只占容器空间的50%，向左浮动，列的宽度仍然相等。谢谢你的帮助 编辑：我也试过在桌子上使用Html 表未按colgroup中的%调整列的大小,html,css,Html,Css,有人能告诉我为什么列不根据它们在colgroup中的%s调整大小吗 问题：制作50%的第一列25%的第二列和第三列。在保留tbody上的显示块的同时，我们可以在body上滚动，而不是整个表。解决方案：保留下面的所有代码，但使用td:nth child属性手动设置%width，而不是使用colgroup（因为它要求显示的不是块而是表行组）。 我也尝试过使用“3*”、“1*”、“1*”作为列宽度，但没有效果。我认为这一定与我将表放在div容器中这一事实有关，或者由于display:block属性，可
style=“width:100%”中删除display:block
。修复了标题和tr。修复了标题的问题。另外，在中设置width:100%
。fixed\u header th、.fixed\u header td
几乎可以解决这一问题，它有点错位。.table容器{
位置：绝对位置；
显示：块；
身高：94%；
宽度：100%；
边缘顶部：10px；
填充：10px；
顶部：15px；
}
// https://codepen.io/GhostRider/pen/GHaFw
.style-2:：-webkit滚动条轨迹
{
-webkit盒阴影：插入0.0 6px rgba（0,0,0,0.3）；
边界半径：10px；
背景色：#F5；
}
.style-2:：-webkit滚动条
{
宽度：12px；
背景色：#F5；
}
.style-2:：-webkit滚动条拇指
{
边界半径：10px；
-webkit盒阴影：插入0.0 6px rgba（0,0,0,3）；
背景色：#F4F7F7；
}
桌子，t车身{
宽度：100%；
身高：100%；
位置：相对位置；
显示：内联块；
表布局：固定；
}
.固定头{
宽度：100%；
表布局：固定；
边界塌陷：塌陷；
}
.固定式头部车身{
显示：块；
宽度：100%；
溢出y：自动；
身高：90%；
}
.fixed_header thead tr{
显示：块；
边框底部：1px纯黑；
}
.固定头th、.固定头td{
填充物：5px；
文本对齐：左对齐；
宽度：200px；
}
因素
尤伊
福伊
第1-0行
第1-1行
第1-2行
第2-0行
第2-1行
第2-2行
第3-0行
第3-1行
第3-2行
第4-0行
第4-1行
第4-2行
第5-0行
第5-1行
第5-2行
第6-0行
第6-1行
第6-2行
第7-0行
第7-1行
第7-2行
第7-0行
第7-1行
第7-2行
第7-0行
第7-1行
第7-2行
第7-0行
第7-1行
第7-2行
50%
25%
25%
第1-0行
第1-1行
第1-2行
第2-0行
第2-1行
第2-2行
第3-0行
第3-1行
第3-2行
第4-0行
第4-1行
第4-2行
第5-0行
第5-1行
第5-2行
第6-0行
第6-1行
第6-2行
第7-0行
第7-1行
第7-2行
第7-0行
第7-1行
第7-2行
第7-0行
第7-1行
第7-2行
第7-0行
第7-1行
第7-2行
<!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>
页面标题
因素
尤伊
F_i系数
第1-0行
第1-1行
<!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>
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;
}