html - Fixed Thead; Scrollable Tbody ~ Righter Columns Less Aligned
问题描述
After reading many posts about having a fixed theader with a scrollabe tbody, most answers point to adjusting the tbody to display: block. However, display block makes my columns on the righter side have a skewed alignment the further right the column goes. I am dealing with dynamic data so sometimes my table is rendered with 16 columns, but sometimes it could be up to 25 columns. I want all the columns aligned properly, while maintaining a fixed thead with a scrollable tbody. Here is my CSS:
table {
overflow: hidden;
width: 100%;
height: 810px;
table-layout: fixed;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
thead,
tbody {
width: 100%;
}
tbody {
flex: 1;
overflow-y: scroll;
width: 100%;
}
th {
cursor: pointer;
}
th {
}
td {
display: flex;
justify-content: center;
}
td,
th {
padding: 0;
}
tr {
width: 100%;
display: flex;
}
tr th {
flex: 1;
}
tr td {
flex: 1;
}
Here is a small Codepen example: https://codepen.io/anon/pen/xMmqxK
The Codepen skew is less prominent than the skew on my website, so it's a bit hard to notice. Any help would be much appreciated. If I posted a screenshot you would be able to see the problem more, however, I cannot due to a corporate envrionment. Thanks again.
解决方案
这里的主要问题是<th>
s 是text-align:center
但<td>
s 是text-align:left
。这就是为什么当每列有更多空间时偏斜会增加。
最简单的解决方案是padding-left: 10px
从<tbody>
(仅包含在您的 CopePen 中)中删除并将<td>
s 设置为text-align: center
.
如果你需要左对齐<td>
的 s 那么你可以做相反的事情并将你<th>
的 s 设置为text-align:left
。
推荐阅读
- python - Python:多个文件中特定列的平均值和标准差,并用标准差条绘制平均值
- angular - 在角度组件内接收 POST 数据
- c++ - 构建器模式实现中的不完整类型错误
- php - 如何在 laravel 中以不同的样式显示帖子元素?
- java - lambda 表达式中的错误返回类型 String 无法转换为 Object
- python - 如何读取整数范围为 0-255(表示图像的灰度像素)的文本文件并转换为二维数组?
- java - 如何对 Set 进行分片?
- c - 是否可以通过 IPC 消息传递队列发送信号?
- java - NoSuchMethodError:org.junit.platform.commons.util.ReflectionUtils.tryToLoadClass
- vue.js - 根据当前路由动态显示组件,vuejs