表中不按百分比调整列的大小
表中不按百分比调整列的大小
提问于 2018-06-01 09:23:17
有人能建议为什么列没有根据它们在colgroup中的%s进行调整吗？
问题:制作50%的第一栏、25%的第二栏和第三栏。同时保持显示块在tbody上，这样我们就可以在主体上滚动，而不是整个表。解决方案:保留所有代码如下，但使用td:nth-子属性手动设置%宽度，而不是使用colgroup (因为它要求显示不是块的，而是表行组)。
我也试过用'3*'，'1*'，'1*‘来表示“3*”的宽度，但没有结果。我认为它必须做一些事情，因为我将表放置在div容器中，或者由于显示:块属性，也许它必须是display: 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>
回答 4
Stack Overflow用户
发布于 2018-06-01 09:59:34
删除下面的类解决了这个问题。
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所取代。我的猜测是，下面显示的这些属性使元素的行为类似于表及其子元素，从而对它们应用表分组规则。小提琴在这里
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;
Stack Overflow用户
发布于 2018-06-01 09:44:39
<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>尝尝这个!我希望这能帮上忙。为我工作。
Stack Overflow用户
发布于 2018-06-01 09:46:56
<!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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50640153
复制相关文章
相似问题
腾讯云开发者
