表格效果

表头 表头 表头
类别 表格内容 表格内容
类别 表格内容 表格内容
类别 表格内容 表格内容
HTML 代码
<table class="table">
  <thead>
    <tr>
      <th>表头</th>
      <th>表头</th>
      <th>表头</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>类别</th>
      <td>表格内容</td>
      <td>表格内容</td>
    </tr>
    <tr>
      <th>类别</th>
      <td>表格内容</td>
      <td>表格内容</td>
    </tr>
    <tr>
      <th>类别</th>
      <td>表格内容</td>
      <td>表格内容</td>
    </tr>
  </tbody>
</table>
        

带水平线

表头 表头 表头
类别 表格内容 表格内容
类别 表格内容 表格内容
类别 表格内容 表格内容
HTML 代码
  <table class="table table-border">
    <thead>
      <tr>
        <th>表头</th>
        <th>表头</th>
        <th>表头</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>类别</th>
        <td>表格内容</td>
        <td>表格内容</td>
      </tr>
      <tr>
        <th>类别</th>
        <td>表格内容</td>
        <td>表格内容</td>
      </tr>
      <tr>
        <th>类别</th>
        <td>表格内容</td>
        <td>表格内容</td>
      </tr>
    </tbody>
  </table>
        

th带背景

表头 表头 表头
类别 表格内容 表格内容
类别 表格内容 表格内容
类别 表格内容 表格内容
HTML 代码
  <table class="table table-border table-bg">
    <thead>
      <tr>
        <th>表头</th>
        <th>表头</th>
        <th>表头</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>类别</th>
        <td>表格内容</td>
        <td>表格内容</td>
      </tr>
      <tr>
        <th>类别</th>
        <td>表格内容</td>
        <td>表格内容</td>
      </tr>
      <tr>
        <th>类别</th>
        <td>表格内容</td>
        <td>表格内容</td>
      </tr>
    </tbody>
  </table>
        

带外边框

表头 表头 表头
类别 表格内容 表格内容
类别 表格内容 表格内容
类别 表格内容 表格内容
HTML 代码
  <table class="table table-border table-bordered">
    <thead>
      <tr>
        <th>表头</th>
        <th>表头</th>
        <th>表头</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>类别</th>
        <td>表格内容</td>
        <td>表格内容</td>
      </tr>
      <tr>
        <th>类别</th>
        <td>表格内容</td>
        <td>表格内容</td>
      </tr>
      <tr>
        <th>类别</th>
        <td>表格内容</td>
        <td>表格内容</td>
      </tr>
    </tbody>
  </table>
        

圆角

表头 表头 表头
类别 表格内容 表格内容
类别 表格内容 表格内容
类别 表格内容 表格内容
HTML 代码
  <table class="table table-border table-bordered radius-10">
    <thead>
      <tr>
        <th>表头</th>
        <th>表头</th>
        <th>表头</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>类别</th>
        <td>表格内容</td>
        <td>表格内容</td>
      </tr>
      <tr>
        <th>类别</th>
        <td>表格内容</td>
        <td>表格内容</td>
      </tr>
      <tr>
        <th>类别</th>
        <td>表格内容</td>
        <td>表格内容</td>
      </tr>
    </tbody>
  </table>
        

奇数行背景设为浅灰色

表头 表头 表头
类别 表格内容 表格内容
类别 表格内容 表格内容
类别 表格内容 表格内容
HTML 代码
  <table class="table table-border table-bordered table-striped">
    <thead>
      <tr>
        <th>表头</th>
        <th>表头</th>
        <th>表头</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>类别</th>
        <td>表格内容</td>
        <td>表格内容</td>
      </tr>
      <tr>
        <th>类别</th>
        <td>表格内容</td>
        <td>表格内容</td>
      </tr>
      <tr>
        <th>类别</th>
        <td>表格内容</td>
        <td>表格内容</td>
      </tr>
    </tbody>
  </table>
        

鼠标悬停样式

表头 表头 表头
类别 表格内容 表格内容
类别 表格内容 表格内容
类别 表格内容 表格内容
HTML 代码
  <table class="table table-border table-bordered table-hover">
    <thead>
      <tr>
        <th>表头</th>
        <th>表头</th>
        <th>表头</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>类别</th>
        <td>表格内容</td>
        <td>表格内容</td>
      </tr>
      <tr>
        <th>类别</th>
        <td>表格内容</td>
        <td>表格内容</td>
      </tr>
      <tr>
        <th>类别</th>
        <td>表格内容</td>
        <td>表格内容</td>
      </tr>
    </tbody>
  </table>