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>
Css to create a table scroll is 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:
(Ignore incorrectly placed table header).
This extra space in IE8 is very undesirable since I need all the space that I can use.
Where does this extra interval come from and how to remove it?
source
share