Table scroll with HTML and CSS [duplicate]
Solution 1:
Table with Fixed Header
<table cellspacing="0" cellpadding="0" border="0" width="325">
<tr>
<td>
<table cellspacing="0" cellpadding="1" border="1" width="300" >
<tr style="color:white;background-color:grey">
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="width:320px; height:80px; overflow:auto;">
<table cellspacing="0" cellpadding="1" border="1" width="300" >
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
</table>
</div>
</td>
</tr>
</table>Result
This is working in all browser
Demo jsfiddle http://jsfiddle.net/nyCKE/6302/
Solution 2:
Late answer, another idea, but very short.
- put the contents of header cells into div
- fix the header contents, see CSS
table { margin-top: 20px; display: inline-block; overflow: auto; }
th div { margin-top: -20px; position: absolute; }
Note that it is possible to display table as inline-block due to anonymous table objects:
"missing" [in HTML table tree structure] elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself.
/* scrolltable rules */
table { margin-top: 20px; display: inline-block; overflow: auto; }
th div { margin-top: -20px; position: absolute; }
/* design */
table { border-collapse: collapse; }
tr:nth-child(even) { background: #EEE; }<table style="height: 150px">
<tr> <th><div>first</div> <th><div>second</div>
<tr> <td>foo <td>bar
<tr> <td>foo foo foo foo foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar bar bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
</table>As of 2016
The proper way to achieve this is position: sticky - see the demo in the link.
Solution 3:
For those wondering how to implement Garry's solution with more than one header this is it:
#wrapper {
width: 235px;
}
table {
border: 1px solid black;
width: 100%;
}
th,
td {
width: 100px;
border: 1px solid black;
}
thead>tr {
position: relative;
display: block;
}
tbody {
display: block;
height: 80px;
overflow: auto;
}<div id="wrapper">
<table>
<thead>
<tr>
<th>column1</th>
<th>column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>row1</td>
<td>row1</td>
</tr>
<tr>
<td>row2</td>
<td>row2</td>
</tr>
<tr>
<td>row3</td>
<td>row3</td>
</tr>
<tr>
<td>row4</td>
<td>row4</td>
</tr>
</tbody>
</table>
</div>Solution 4:
Works only in Chrome but it can be adapted to other modern browsers. Table falls back to common table with scroll bar in other brws. Uses CSS3 FLEX property.
http://jsfiddle.net/4SUP8/1/
<table border="1px" class="flexy">
<caption>Lista Sumnjivih vozila:</caption>
<thead>
<tr>
<td>Opis Sumnje</td>
<td>Registarski<br>broj vozila</td>
<td>Datum<br>Vreme</td>
<td>Brzina<br>(km/h)</td>
<td>Lokacija</td>
<td>Status</td>
<td>Akcija</td>
</tr>
</thead>
<tbody>
<tr>
<td>Osumnjičen tranzit</td>
<td>NS182TP</td>
<td>23-03-2014 20:48:08</td>
<td>11.3</td>
<td>Raskrsnica kod pumpe<br></td>
<td></td>
<td>Prikaz</td>
</tr>
<tr>
<tr>
<td>Osumnjičen tranzit</td>
<td>NS182TP</td>
<td>23-03-2014 20:48:08</td>
<td>11.3</td>
<td>Raskrsnica kod pumpe<br></td>
<td></td>
<td>Prikaz</td>
</tr>
<tr>
<tr>
<td>Osumnjičen tranzit</td>
<td>NS182TP</td>
<td>23-03-2014 20:48:08</td>
<td>11.3</td>
<td>Raskrsnica kod pumpe<br></td>
<td></td>
<td>Prikaz</td>
</tr>
<tr>
<tr>
<td>Osumnjičen tranzit</td>
<td>NS182TP</td>
<td>23-03-2014 20:48:08</td>
<td>11.3</td>
<td>Raskrsnica kod pumpe<br></td>
<td></td>
<td>Prikaz</td>
</tr>
</tbody>
</table>
Style (CSS 3):
caption {
display: block;
line-height: 3em;
width: 100%;
-webkit-align-items: stretch;
border: 1px solid #eee;
}
.flexy {
display: block;
width: 90%;
border: 1px solid #eee;
max-height: 320px;
overflow: auto;
}
.flexy thead {
display: -webkit-flex;
-webkit-flex-flow: row;
}
.flexy thead tr {
padding-right: 15px;
display: -webkit-flex;
width: 100%;
-webkit-align-items: stretch;
}
.flexy tbody {
display: -webkit-flex;
height: 100px;
overflow: auto;
-webkit-flex-flow: row wrap;
}
.flexy tbody tr{
display: -webkit-flex;
width: 100%;
}
.flexy tr td {
width: 15%;
}
Solution 5:
This work for me
Demo: jsfiddle
$(function()
{
Fixed_Header();
});
function Fixed_Header()
{
$('.User_Table thead').css({'position': 'absolute'});
$('.User_Table tbody tr:eq("2") td').each(function(index,e){
$('.User_Table thead tr th:eq("'+index+'")').css({'width' : $(this).outerWidth() +"px" });
});
var Header_Height = $('.User_Table thead').outerHeight();
$('.User_Table thead').css({'margin-top' : "-"+Header_Height+"px"});
$('.User_Table').css({'margin-top' : Header_Height+"px"});
}