为什么这样?
体验好
原理
通过两个表格,使其th td 对应,产生一种错觉。
代码
1.html
<div class="content">
<div class="table-head">
<table>
<colgroup>
<col style="width: 25%;" /><col />
<col style="width: 25%;" /><col />
<col style="width: 25%;" /><col />
<col style="width: 25%;" /><col />
</colgroup>
<thead>
<tr>
<th>日期</th>
<th >单价</th>
<th >数量</th>
<th >小计</th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<table>
<colgroup>
<col style="width: 25%;" /><col />
<col style="width: 25%;" /><col />
<col style="width: 25%;" /><col />
<col style="width: 25%;" /><col />
</colgroup>
<tbody>
{loop $data $k $v}
<tr>
<td scope="row">{$v['date']}</td>
<td>{if isset($v['discount'])}¥{$v['price']}<span style="text-decoration:line-through;color:#999999;">¥{$v['oprice']}</span>{else}¥{$v['price']}{/if}</td>
<td>{$v['roomnum']}</td>
<td>¥{$v['subtotal']}</td>
</tr>
{/loop}
</tbody>
</table>
</div>
<div class="total">共 {$checknum} 晚 合计¥{$allprice}</div>
</div>
2.css
<style>
.table-head{padding-right:17px;background-color:#999;color:#000;}
.table-body{width:100%; height:390px;overflow-y:scroll;}
.table-head table,.table-body table{width:100%;}
.table-head tr,.table-body tr{line-height: 35px;}
.table-head th,.table-body td{text-align: center;}
.table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}
.total {
float:right;
padding-right: 20px;
margin-top:5px;
}
</style>
核心
<colgroup>
<col style="width: 25%;" /><col />
<col style="width: 25%;" /><col />
<col style="width: 25%;" /><col />
<col style="width: 25%;" /><col />
</colgroup>
本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/5824956.html,如需转载请自行联系原作者