开发者社区> 桃子红了呐> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

th固定 td滚动的表格实现

简介:
+关注继续查看

422101-20160831103626324-862958856.png

为什么这样?

体验好

原理

通过两个表格,使其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,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ElementUI el-table 设置固定列,横向滚动条在固定列的位置上无法滚动的问题
ElementUI el-table 设置固定列,横向滚动条在固定列的位置上无法滚动的问题
0 0
Element表格el-table固定表头且高度占满
本文目录 1. 固定表头 2. 占满高度 3. 使用vh占满高度 4. 动态调整高度
0 0
easyui datagrid 列的内容超出所定义的列宽时,自动换行
在datagrid中添加一句,DataGrid属性中的nowrap:false。 (默认为true)。 注意nowrap不是列属性, xxx   这样是不行的。   需要写在datagrid中 eg: html:   id ...
487 0
div 自适应高度 自动填充剩余高度
方案1: Html: 头部DIV 下部DIV CSS: html, body { height: 100%; padding: 0; margin: 0; } .
651 0
固定宽高的DIV绝对居中示例
看了一些代码,然后自己试验了一番,分享如下示例: 实现点: 如果元素的宽高固定,那么,css指定样式为top:50%;left:50%; 而margin-top和 margin-left 指定为负数,绝对值为自身宽高的一半 当然,position也需要指定为absolute,或者relative.  如果要在某个父级元素内居中,那么父元素也需要指定CSS的position属性。
613 0
Grid固定表头和固定栏css实现
.Freezing    {         position:relative ;    table-layout:fixed;    top:expression(this.offsetParent.
734 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载