css表列不会与固定标题对齐
css表列不会与固定标题对齐
提问于 2018-07-07 23:58:41
我一直在尝试制作一个可滚动的表格，但是我的标题和列不能对齐…我也希望它跨越整个宽度(100%)，我还没有解决这个问题…以下是原始代码，我已经提供了一个到我的表格设计和进度的CSS小提琴查询的链接……
我的终极目标；
- 有表格的全宽页面
- 有页眉静态
- 有表格的正文可滚动的
HTML
<table class="fixed_header">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1-0</td>
<td>row 1-1</td>
<td>row 1-2</td>
<td>row 1-3</td>
<td>row 1-4</td>
</tr>
<tr>
<td>row 2-0</td>
<td>row 2-1</td>
<td>row 2-2</td>
<td>row 2-3</td>
<td>row 2-4</td>
</tr>
<tr>
<td>row 3-0</td>
<td>row 3-1</td>
<td>row 3-2</td>
<td>row 3-3</td>
<td>row 3-4</td>
</tr>
<tr>
<td>row 4-0</td>
<td>row 4-1</td>
<td>row 4-2</td>
<td>row 4-3</td>
<td>row 4-4</td>
</tr>
</tbody>
</table>CSS：
.fixed_header tbody{
display:block;
overflow:auto;
height:100px;
width:100%;
}
.fixed_header thead tr{
display:block;
height:20px;
}
table {
border-collapse: collapse;
width: 100%;
}
table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
width: 100%;
}
table tbody{
width: 100%;
}
table th {
background-color: #545556;
color: white;
padding: .425em;
text-align: center;
}
table td {
padding: .425em;
text-align: center;
word-wrap: break-word;
font-size: 0.75em;
}
table th {
font-size: .75em;
letter-spacing: .1em;
text-transform: uppercase;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-08 01:10:41
演示：https://jsfiddle.net/ap4ognvz/64/
我已经将以下内容添加到您的CSS中：
tr {
display: table;
width: 100%;
table-layout: fixed;
}
因此，最终的CSS将如下所示：
.fixed_header tbody {
display: block;
overflow-y: scroll;
overflow-x: hidden;
height: 100px;
}
.fixed_header thead tr {
height: 20px;
}
table {
border-collapse: collapse;
}
table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th {
background-color: #545556;
color: white;
padding: .425em;
text-align: center;
}
table td {
padding: .425em;
text-align: center;
word-wrap: break-word;
font-size: 0.75em;
}
table th {
font-size: .75em;
letter-spacing: .1em;
text-transform: uppercase;
}
tr {
display: table;
width: 100%;
table-layout: fixed;
}
我已经将接受的答案引用到此question。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51224759
复制相关文章
相似问题