结合bootstrap自定义table列表
使用bootstrap这个方便的web UI框架,方便了自己,少些了很多的代码,至少兼容性方面,我觉的我就不用操心了,呵呵。
看看我自定义的table列表
css代码:
table.smoth{width:100%}
table.smoth thead tr.caption td.item{background-color: #E4E4E4;border:1px solid #ccc}
table.smoth tbody tr.list td{border:1px solid #ccc}
table.smoth tbody tr.list:nth-child(odd) td{background-color: #fff}
table.smoth tbody tr.list:nth-child(even) td{background-color: #F2F2F2}
html代码:
<div class="table">
<table class='smoth' >
<thead>
<tr class='caption'>
<td class='item'>电视剧名称</td>
<td class='item'>上线日期</td>
<td class='item'>ITV状态</td>
<td class='item'>导演</td>
<td class='item'>编剧</td>
<td class='item'>主演</td>
</tr>
</thead>
<tbody>
<?php for($i = 0; $i < 10; $i++):?>
<tr class='list'>
<td>咱俩的事</td>
<td>2013-01-13</td>
<td>是</td>
<td>David Zhang</td>
<td>David</td>
<td>Zhang</td>
</tr>
<?php endfor;?>
</tbody>
</table>
</div>
加入了一点php代码,实则是一个简单的循环
图片展示
版权声明
由 davidzhang创作并维护的 Gowhich博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。
本文首发于 博客( https://www.gowhich.com ),版权所有,侵权必究。
本文永久链接: https://www.gowhich.com/blog/210
版权声明
由 davidzhang创作并维护的 Gowhich博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。
本文首发于 Gowhich博客( https://www.gowhich.com ),版权所有,侵权必究。
本文永久链接: https://www.gowhich.com/blog/210