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>


本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/5824956.html，如需转载请自行联系原作者