Categories
css html internet-explorer-8 twitter-bootstrap

Scrollable table has extra unwanted space in IE8

On a website with bootstrap.css installed I have the following scrollable table:

!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table class="table table-condensed scrollable">
<thead>
<tr>
<th colspan="4">
Application Event Log <br />
Time Source ... ...
</th>
</tr>
</thead>
<tbody id="testlogEvents" class="scrollable">
<tr id="13705" class="warning">
<td>10:23</td>
<td>IIS Express</td>
<td>3</td>
<td>null</td>
</tr>
<tr id="13704" class="warning">
<td>10:20</td>
<td>TestLog</td>
<td>4</td>
<td>null</td>
</tr>
</tbody>
</table>
</body>
</html>

The css to make the table scrollable looks as follows:

.scrollable table {
border-collapse: collapse;
width: 100%;
}
.scrollable thead {
text-align: left;
display: table;
float: left;
width: 100%;
}
.scrollable thead tr {
display: table-row;
width: 100%;
}
.scrollable tbody {
display: block;
height: 60px;
overflow: auto;
float: left;
width: 100%;
}
.scrollable tbody tr {
display: table;
width: 100%;
}
.scrollable tbody tr {
height: 18px;
}
.scrollable tbody td {
padding: 1px 8px;
width: 25%;
}
.scrollable th, td {
width: 25%;
}

The problem is this:

Extra space

(Ignore the not properly placed ‘table header’).

This extra space in IE8 is very much unwanted since I need all the space I can use.

Where does this extra spacing come from and how can I remove it?