阅读(3764) (18)

Bootstrap自定义table列表

2016-09-08 18:54:00 更新

Bootstrap自定义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代码,实则是一个简单的循环