Is it possible to split a table into two lines (<hr /> <hr>) while maintaining the row height so that rows after the 11th row are only visible upon scrolling? My HTML code is quite lengthy, making it easier to understand with an example. Click here to view the example:
see example
style code:
html { height: 100%; width: 100%; }
body { height: 100%; width: 100%; margin: 0; padding: 0; border: 0; background: #FFFFFF;
font: 13px/15px Verdana,Arial,Helvetica,sans-serif; }
img { border: none; }
table, tr, td, th {
border-collapse:collapse;
vertical-align: top;
text-align: left;
font: 13px/15px Verdana,Arial,Helvetica,sans-serif; }
a { color: #8D0D19;}
table.bordered tr th, table.bordered tr td {
border: 1px solid #000000;
}
table caption, table th, table td {
margin: 2px;
padding: 2px 2px;
vertical-align: top;
}
#pagination .selected { font-weight: bold; color: #8D0D19;}
table tr.odd {
background: none repeat scroll 0 0 #E5E5E5;
}
table tr.even {
background: none repeat scroll 0 0 #F0FFF0;
}
table{
margin: 5px auto;
}
#tablestyle{
height:250px;
}
th {
background: azure;
color: #000000;
font-weight: bold;
}
table tr.even:hover, .hover{
background:#A2D2E1;
}
table tr.odd:hover, .hover{
background:#BBB2E1;
}
table tD:hover, .hover{
background:#FFFF00;
}
.display{
background:red;
width:250px;
height:20px;
font-size:20px;
}
.edittd
{
font-size:14px;
width:200px;
background-color:yellow;
border:solid 1px #000;
padding:4px;
}
.statuSnoChange{
font-size:14px;
width:100px;
height:20px;
background:azure;
}
.statuSChange{
font-size:14px;
width:150px;
height:20px;
background:#FFFF00;
}