滚动 tbody 和 header 不排队

Question

我有以下 table 和 css，但无法让 header 正确排列。我的想法是为 TD 和 TH 标签创建一个 class 并在那里设置固定宽度。但这对我不起作用。请在此处查看代码：

我的css如下：

table#targetedAttacks
{
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    table-layout: fixed;
    width: 500px
}
tbody.scrollTbl {
    height: 250px;
    overflow: auto;
    border: 2px solid #000;
    background-color:#ccc;
    width: 525px;
}

table#targetedAttacks td {
    background-color:#fafafa;
    cursor: default;
    border-bottom: 1px solid #ccc;
    padding: 3px 10px;
}
tbody.scrollTbl td div {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width:100px;
}

thead > tr, tbody{
    display:block;
}
.date {
    width: 20%;
}
.subject {
    width: 20%;
}
.malwareName {
    width: 20%;
}
.malwareCat {
    width: 20%;
}
.reason {
    width: 10%;
}
.recipients {
    width: 10%;
}

table#targetedAttacks thead th
{
    text-align: center;
    background-color: #ddd;
    cursor: pointer;
    padding: 5px;
}

Answer 1

删除以下内容：

thead > tr, tbody{
    display:block;
}

它会如您所愿地工作

Answer 2

我通过将 td/th 标签中包含的 div 的宽度设置为直接与 td/th 标签上的宽度相反来使其工作。请在此处查看 fiddle：

http://jsfiddle.net/rc7g79Lt/3/

这里css：

table#targetedAttacks
{
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    table-layout: fixed;
    width:505px
}
tbody.scrollTbl {
    height: 250px;
    overflow: auto;
    border: 2px solid #000;
    background-color:#ccc;
}

table#targetedAttacks td {
    background-color:#fafafa;
    cursor: default;
    border-bottom: 1px solid #ccc;
}
tbody.scrollTbl td div {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

thead > tr, tbody{
    display:block;
}

table#targetedAttacks thead th
{
    text-align: center;
    background-color: #ddd;
    cursor: pointer;
}
table#targetedAttacks div{
    width:75px;
}

滚动 tbody 和 header 不排队

scrolling tbody and header not lining up

html

css

html-table