使用CSS的HTML表固定标头
阿德什·辛格（Adesh Singh）
我在图像文件中插入了一个html文件，我必须使其标题固定，其余表可通过CSS滚动显示。
我发现css可以做到这一点，但是我的问题是在html文件中插入css之后，标题和数据的格式不匹配。建议我在css中出什么毛病，我的css如下。
我希望我的格式不被打扰，仅应修复标头。
<style type="text/css">
div.tableContainer
{
clear: both;
border: 1px solid #963;
height: 300px;
overflow: hidden;
width: 1000px
}
html>body thead.fixedHeader tr
{
display: block
}
thead.fixedHeader th
{
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: left
position: relative
width: 200px
}
html>body tbody.scrollContent {
display: block;
height: 300px;
overflow: auto;
width: 100%
}
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
html>body thead.fixedHeader th +th {
width: 50px
}
</style>
这是html文件的图像，我无法插入其源代码。
高拉夫·谢哈迪亚（Gaurav Shekhadiya）
向表添加边距，例如jsfiddle.net/h5t98/
table
{
margin-top: 26px;
width: 138px;
}
.month
{
width: 79px;
}
.saving
{
width:49px;
}
我给定了固定的列宽，您可以根据最大列宽进行更改。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
使用CSS的HTML表固定标头
- 2
HTML固定标头失败ID使用
- 3
如何使用CSS在Mobile上禁用固定标头
- 4
如何使用CSS平滑滚动补偿固定标头？
- 5
如何使用CSS在Mobile上禁用固定标头
- 6
高度固定的CSS固定标头
- 7
如何使用SlickNav制作固定标头
- 8
HTML5是否具有内置的固定标头表？
- 9
固定标头的值
- 10
引导表固定标头不起作用
- 11
数据表固定标头不向左或向右滚动
- 12
重叠动态固定标头
- 13
使用HTML和CSS创建固定的标头
- 14
具有响应表宽度的HTML表固定标题
- 15
CSS固定标题
- 16
CSS固定标题
- 17
CSS：具有多个表头的固定标题的滚动表
- 18
CSS：具有多个表头的固定标题的滚动表
- 19
具有固定标题/列的HTML表-CSS解决方案-在Firefox中不起作用
- 20
具有固定标题/列的HTML表-CSS解决方案-在Firefox中不起作用
- 21
为什么我的数据表固定标头不起作用/
- 22
在固定标头之后添加元素
- 23
偏移固定标头的锚点部分
- 24
200滚动后的jQuery固定标头
- 25
关于MQTT固定标头结构？
- 26
固定标头影响锚点
- 27
固定标头引导程序的位置
- 28
PhoneGap上的jQuery移动固定标头
- 29
使固定标头看起来持久
我来说两句