codecamp

Bootstrap自定义table列表

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



Bootstrap的引用样式
Bootstrap的水平定义列表
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }