若要运行代码效果，请另存为div.php文件，后运行。
<html>
<head>
<style type="text/css">
.scroll{
width:500px;
height:124px;
overflow-x:auto;
overflow-y:hidden;
}
.title{
width:42px;
height:124px;
overflow-x:scroll;
overflow-y:hidden;
}
td.list {
padding: 0 1px;
border-bottom: 1px solid #DDD;
white-space: nowrap;
}
tr.odd {
background: #EEE;
}
tr.even {
background: #FFF;
}
.blue {
color: blue;
}
.green {
color: green;
}
table.list1 {
border-collapse: collapse;
background: #fff;
font-size: 12px;
margin: 2px 0;
line-height:20px;
}
.content{
border:1px #999 solid;
width:545px;
font-size: 12px;
}
.left{
width:42px;
float:left;
height:124px;
}
.left dt{
list-style:none;
border-collapse: collapse;
color: #000;
padding: 0 5px;
font-weight: normal;
background: gold;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
line-height:20px;
}
.right{
width:500px;
float:left;
}
</style>
</head>
<body>
<div class="content">
<div class="title left">
<dl>
<dt> HeadA</dt>
<dt> HeadB</dt>
<dt> HeadC</dt>
<dt> HeadD</dt>
<dt> HeadE</dt>
</dl>
</div>
<div class="scroll right">
<table class="list1" >
<?php
for($i=0;$i<5;$i++){
if($i%2==0){
echo '<tr class="odd blue">';
}else{
echo '<tr class="even green">';
}
for($j=1000;$j<1200;$j++){
echo '<td class="list">'.$j.'</td>';
}
echo '</tr>';
}
?>
</table>
</div>
</div>
</body>
</html>
效果如下：
浙公网安备 33010602011771号