可滚动的td宽度在提供宽度后不占用全部空间
可滚动的td宽度在提供宽度后不占用全部空间
提问于 2017-10-23 12:30:51
我有一个固定的头部可滚动的tbody。即使在td中提供宽度后，列也没有正确对齐。我不需要增加额外的div来达到同样的目的。
table.tables {
width:590px;
position: relative;
height: 200px;
}
table.tables thead {
display: table;
}
table.tables tbody {
display: block;
}
table.tables thead {
position: relative;
width: 100%;
background: aqua;
}
.tables tbody {
height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
table.tables tbody tr {
display:table;
table-layout: fixed;
width: 100%;
}
table.tables thead tr {
display:table;
table-layout: fixed;
width: 100%;
}<div class="wrap">
<table class="tables">
<thead>
<tr>
<th width="40%">Header1</th>
<th width="40%">Header2</th>
<th width="20%">Header3</th>
</tr>
</thead>
<tbody>
<tr>
<td width="40%">Value1</td>
<td width="40%">Value2</td>
<td width="20%">Value3</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr>
</tbody>
</table>
</div>
Stack Overflow用户
回答已采纳
发布于 2017-10-23 12:37:07
你可以这样做：
table.tables {
width: 590px;
position: relative;
height: 200px;
}
table.tables > thead{display: table;}
table.tables > tbody{display: block;}
table.tables > thead {
position: relative;
width: calc(100% - 17px); /* 17px scroll-bar width */
background: aqua;
}
table.tables > thead > tr > th {
text-align: left; /* the default value for 'th' is center */
}
.tables tbody {
height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
table.tables > tbody > tr {
display: table;
table-layout: fixed;
width: 100%;
}
table.tables > thead > tr > th:first-child {width: 40%}
table.tables > thead > tr > th:nth-child(2) {width: 40%}
table.tables > thead > tr > th:nth-child(3) {width: 20%} /* can also use :last-child */
table.tables > tbody > tr > td:first-child {width: 40%}
table.tables > tbody > tr > td:nth-child(2) {width: 40%}
table.tables > tbody > tr > td:nth-child(3) {width: 20%} /* can also use :last-child */
table.tables > thead > tr {
display: table;
table-layout: fixed;
width: 100%;
}
/* Still here just in case you make up your mind.
tbody > tr > td {
text-align: center;
}
*/<div class="wrap">
<table class="tables">
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr><tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr><tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr><tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr><tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr><tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr><tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr><tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr><tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr><tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr><tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr><tr>
<td>Value1</td>
<td>Value2</td>
<td>Value2</td>
</tr>
</tbody>
</table>
</div>
默认情况下，td的文本左对齐，th的对齐它的中心。要垂直对齐，您需要从100%的滚动条中减去17 it的宽度，并对齐th的左边。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46889447
复制相关文章
相似问题
腾讯云开发者
