Bootstrap自定義table列表

2020-08-08 10:56 更新

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狀態(tài)</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代碼,實則是一個簡單的循環(huán)



以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號