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>

巴特西

th固定 td滚动的表格实现

为什么这样？

原理

代码

最新文章

热门文章