如何在溢出和正常时将此表头与其列对齐
如何在溢出和正常时将此表头与其列对齐
提问于 2017-01-16 19:55:11
如果你看到表格，你会注意到，由于滚动条上的溢出表头和表行对齐不匹配。
如何在两种情况下保持它们之间的正确对齐:正常或溢出。
下面是源代码。
table {
font-family: arial, sans-serif;
border-collapse: collapse;
}
html {
overflow-y: scroll;
}
tbody {
display:block;
height:100px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
thead {
width: calc(100%);
}
th{
background-color: #2c3539;
color:white;
border: 1px solid black;
text-align: left;
padding: 8px;
}
td{
border: 1px solid black;
text-align: left;
padding: 8px;
}<div>
<table class="table" id="dash-board" style="width: 50%;">
<thead>
<tr>
<th>Office</th>
<th>Total Task</th>
<th>Done</th>
<th>Not Done</th>
</tr>
</thead>
<tbody>
<tr>
<td>Office-1</td>
<td>3</td>
<td>0</td>
<td>3</td>
</tr>
<tr>
<td>Office-2</td>
<td>7</td>
<td>0</td>
<td>7</td>
</tr>
<tr>
<td>Office-3</td>
<td>2</td>
<td>0</td>
<td>2</td>
</tr>
<tr>
<td>Office-3</td>
<td>1</td>
<td>0</td>
<td>1</td>
</tr>
</tbody>
</table>
<div>
回答 2
Stack Overflow用户
发布于 2017-01-16 20:28:25
Stack Overflow用户
发布于 2017-01-16 21:10:13
对于溢出-y问题，您可以尝试宽度计算的头部，你已经设置了，但计算不工作。检查下面的css，我刚刚将thead和tbody tr类分开来计算宽度。检查scroll-y是否正常工作。
.table {
font-family: arial, sans-serif;
border-collapse: collapse;
}
tbody {
display:block;
height:100px;
overflow:auto;
}
tbody tr {
display:table;
width: calc(100% - 1px); /*this 1px is the border which cause the overflow-x*/
table-layout:fixed;
}
thead {
display:table;
width: calc(100% - 17.5px);/*thead Width - (Scrollbar width + border Width) */
table-layout:fixed;
}
th{
background-color: #2c3539;
color:white;
border: 1px solid black;
text-align: left;
padding: 8px;
}
td{
border: 1px solid black;
text-align: left;
padding: 8px;
}<div>
<table class="table" id="dash-board" style="width: 50%;">
<thead>
<tr>
<th>Office</th>
<th>Total Task</th>
<th>Done</th>
<th>Not Done</th>
</tr>
</thead>
<tbody>
<tr>
<td>Office-1</td>
<td>3</td>
<td>0</td>
<td>3</td>
</tr>
<tr>
<td>Office-2</td>
<td>7</td>
<td>0</td>
<td>7</td>
</tr>
<tr>
<td>Office-3</td>
<td>2</td>
<td>0</td>
<td>2</td>
</tr>
<tr>
<td>Office-3</td>
<td>1</td>
<td>0</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41675880
复制相关文章
相似问题
腾讯云开发者
