使用 css 的 HTML 表格固定标题

Question

我在图像文件中插入了一个 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 文件的图像，我无法插入它的源代码。

Answer 1

为表格添加边距，如jsfiddle.net/h5t98/

table
{
    margin-top: 26px;
    width: 138px;
}
.month
{
    width: 79px;
}
.saving
{
    width:49px;
}

我给出了固定的列宽，你可以根据你的最大列宽来改变。