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>