直接使用代码

图片素材

无

css代码

   <style>
     /*表格类*/
      .my-table{ width:100%; border-collapse:collapse}
      .my-table tr td,.my-table tr th{height:35px; line-height:35px;border:1px solid #ccc; padding-left:10px;}
      .my-table tbody tr:nth-child(even){ background:#efefef; cursor:pointer;}
      .my-table tbody tr:hover{ background:#eee; cursor:pointer;}
    
</style>

HTML+JS代码

   <div class="container">
      <div class="row">
        <table class="my-table">
          <thead>
            <tr class="bg-green">
              <th>configurations</th>
              <th>dual 1.8ghz</th>
              <th>dual 2ghz</th>
              <th>dual 2.5ghz</th>
            </tr>
          </thead>
          <tbody>
            <tr class="green">
              <th>configurations</th>
              <th>dual 1.8ghz</th>
              <th>dual 2ghz</th>
              <th>dual 2.5ghz</th>
            </tr>
            <tr>
              <th>lipeng</th>
              <td>m9454ll/a</td>
              <td>m9455ll/a</td>
              <td>m9457ll/a</td>
            </tr>
            <tr>
              <th>lipeng</th>
              <td>m9454ll/a</td>
              <td>m9455ll/a</td>
              <td>m9457ll/a</td>
            </tr>

          </tbody>
          <tfoot>
            <tr>
              <td colspan='4'>总数量：20</td>
            </tr>
          </tfoot>
        </table>
      </div>
</div>