结合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代码,实则是一个简单的循环

图片展示


如果您觉得此文章对你帮助很大,不妨打赏下!
comments powered by Disqus