th固定 td滚动的表格实现

为什么这样？

体验好

原理

通过两个表格，使其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">共&nbsp;{$checknum}&nbsp;晚 合计￥{$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>