Where The Streets Have No Name

table scroll 본문

Developement/Web

table scroll

highheat 2006. 8. 11. 13:50

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>website</title>
<style type='text/css'>
body{
padding:0;
margin: 20px;
font: normal 13px arial, sans-serif;
}

table.TableMain{
border: 1px solid black;
}

thead tr th, tfoot tr th{
background-color: #996600;
}

.scrollTable th, .scrollTable td{
padding: 5px;
border: solid black;
border-width: 0 1px 1px 0;
}

.scrollTable{ width:100% }

.scrollTable > tbody{
height:300px;
overflow:auto;
}

.scrollTable .th_extra{
width: 18px;
padding: 0;
border-right-width: 0;
}

.TableContainer > .scrollTable .th_extra{ width: 19px; }

</style>

<style type="text/css">
div.TableContainer {
    height: 300px;
    overflow: auto;
    width: 100%;
}

thead.fixedHeader tr th { 
    position: relative;
}
.scrollTable{width: expression(this.parentNode.offsetWidth-17);}
.th_extra{display:none;}
</style>

</head>

<body>

<table border='0' cellspacing='0' cellpadding='0' class='TableMain' width='60%'>
<tr>
<td>
<div class="TableContainer">
<table border='0' cellspacing='0' cellpadding='0' class="scrollTable">
    <thead class="fixedHeader">
        <tr>
          <th>wkdjchlkj</th>
          <th>khwdgc9376</th>
          <th>76235uyg</th>
            <th>yg</th>
            <th class='th_extra'></th>
        </tr>
    </thead>    
    <tbody class="scrollContent">
        <tr>
            <td>1111111111</td>
<td>JAh RAsta</td>
            <td>222</td>
            <td>444444444444</td>
        </tr>
        <tr>
            <td>1111111111</td>
<td>JAh RAsta</td>
            <td>222</td>
            <td>444444444444</td>
        </tr>
        <tr>
            <td>1111111111</td>
<td>JAh RAsta</td>
            <td>222</td>
            <td>444444444444</td>
        </tr>
        <tr>
            <td>1111111111</td>
<td>JAh RAsta</td>
            <td>222</td>
            <td>444444444444</td>
        </tr>
        <tr>
            <td>1111111111</td>
<td>JAh RAsta</td>
            <td>222</td>
            <td>444444444444</td>
        </tr>
        <tr>
            <td>1111111111</td>
<td>JAh RAsta</td>
            <td>222</td>
            <td>444444444444</td>
        </tr>
        <tr>
            <td>1111111111</td>
<td>JAh RAsta</td>
            <td>222</td>
            <td>444444444444</td>
        </tr>
        <tr>
            <td>1111111111</td>
<td>JAh RAsta</td>
            <td>222</td>
            <td>444444444444</td>
        </tr>
        <tr>
            <td>1111111111</td>
<td>JAh RAsta</td>
            <td>222</td>
            <td>444444444444</td>
        </tr>
        <tr>
            <td>1111111111</td>
<td>JAh RAsta</td>
            <td>222</td>
            <td>444444444444</td>
        </tr>
        <tr>
            <td>1111111111</td>
<td>JAh RAsta</td>
            <td>222</td>
            <td>444444444444</td>
        </tr>
        <tr>
            <td>1111111111</td>
<td>JAh RAsta</td>
            <td>222</td>
            <td>444444444444</td>
        </tr>
        <tr>
            <td>1111111111</td>
<td>JAh RAsta</td>
            <td>222</td>
            <td>444444444444</td>
        </tr>
        <tr>
            <td>1111111111</td>
<td>JAh RAsta</td>
            <td>222</td>
            <td>444444444444</td>
        </tr>
    </tbody>
</table>
</div>

</td>
</tr>
</table>

</body>
</html>

'Developement/Web' Related Articles more