Q:

scrolling tbody and header not lining up

I have the following table and css and cannot get the header to line up correctly. My idea was to create a class for the TD and TH tags and set a fixed width there. This did not work for me though. Please see the code here:
http://jsfiddle.net/rc7g79Lt/
The css I have is as follows:
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;
}

A:

I got it working by setting the width on the div contained in the td/th tags as oppose to the width on the td/th tags directly. See the fiddle here:
http://jsfiddle.net/rc7g79Lt/3/
And css here:
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;
}

