th固定 td滚动的表格实现


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,如需转载请自行联系原作者

上一篇:[转]jquery.pagination.js分页


下一篇:IE8及以下不支持trim()的处理方法