Question

I want to insert the table into two lines (<hr /> <hr>) and keep the height of each row so that rows beyond row 11 will not see them but by scrolling.
my code html so long which is more easy to enter to link example.
Thanks
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, tr { 
    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;
}

Answer 1

add overflow:auto; to #tablestyle, this will make your div scroll past 250px which is the current height