表格行和标题未正确对齐?

时间:2016-04-15 14:37:36

标签: html css gsp

我正在动态添加表头和表体以及垂直滚动条来显示结果,我在这里面临的问题是表头行和行未对齐...这是我的代码:

GSP代码:                                                                                                   

$ {柱}

                                                                                                                  

$ {行[柱]}

                                                                                           

我的css代码:

table.scroll {
    /* width: 100%; */ /* Optional */
    /* border-collapse: collapse; */
    border-spacing: 0;
    border: 2px solid black;
}

table.scroll tbody,
table.scroll thead { display: block; }

thead tr th {
    height: 30px;
    width:15px;
    line-height: 30px;
    /* text-align: left; */
}

table.scroll tbody {
    height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody { border-top: 2px solid black; }

tbody td, thead th {
     width:15px;
    /* Optional */
    border-right: 1px solid black;
    /* white-space: nowrap; */
}

tbody td:last-child, thead th:last-child {
    border-right: none;
}

任何建议都将受到赞赏..

由于

1 个答案:

答案 0 :(得分:1)

如果您要添加thead元素,则还需要为其下方的行添加tbody元素。请参阅w3schools:http://www.w3schools.com/tags/tag_thead.asp