滚动tbody和标题没有排队

Question

我有下面的表和css，不能正确排列标题。我的想法是为TD和TH标签创建一个类，并在那里设置固定宽度。尽管如此，这并不适用于我。请在这里看到的代码：

http://jsfiddle.net/rc7g79Lt/

的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

我知道它通过设置包含在td/t的div的宽度h标签直接与td/th标签上的宽度相反。在这里看到的小提琴：这里

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; 
} 

Answer 2

摆脱如下：

thead > tr, tbody{ 
    display:block; 
} 

，这将只是工作，你打算