表格

架構

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

為任意 table 標籤添加.table類

<h3>為任意 table 標籤添加.table類</h3>
    <hr>
    <div  class= "container-fluid">
      <div  class= "row" >
          <div class="col-md-offset-2 col-md-8">
            <table class="table">
              <thead>
                <tr>
                  <th class="col-md-8">Month</th>
                  <th class="col-md-4">Savings</th>
                </tr>
              </thead>

              <tfoot>
                <tr>
                  <td>Sum</td>
                  <td>$180</td>
                </tr>
              </tfoot>

              <tbody>
                <tr>
                  <td>January</td>
                  <td>$100</td>
                </tr>
                <tr>
                  <td>February</td>
                  <td>$80</td>
                </tr>
              </tbody>
            </table>
          </div>
      </div>
    </div>

條紋狀表格

<table  class= "table table-striped" >
  ...
</table>

帶邊框的表格

<table  class= "table table-bordered" >
  ...
</table>

鼠標懸停

通過添加.table-hover類可以讓<tbody>中的每一行對鼠標懸停狀態作出響應。

<table  class= "table table-hover" >
  ...
</table>

緊縮表格

通過添加.table-condensed類可以讓表格更加緊湊，單元格中的內補（padding）均會減半。

<table  class= "table table-condensed" >
  ...
</table>

狀態類

通過這些狀態類可以為行或單元格設置顏色。

Class	描述
.active	鼠標懸停在行或單元格上時所設置的顏色
.success	標識成功或積極的動作
.info	標識普通的提示信息或動作
.warning	標識警告或需要用戶注意
.danger	標識危險或潛在的帶來負面影響的動作

響應式表格

將任何.table元素包裹在.table-responsive元素內，即可創建響應式表格，其會在小屏幕設備上（小於768px）水平滾動。當屏幕大於768px寬度時，水平滾動條消失。

<div  class= "table-responsive" > 
  <table  class= "table" >
    ...
  </table> 
</div>

實例

<div class="table-responsive">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th><font><font>#</font></font></th>
            <th><font><font>Table heading</font></font></th>
            <th><font><font class="goog-text-highlight">Table heading</font></font></th>
            <th><font><font>Table heading</font></font></th>
            <th><font><font>Table heading</font></font></th>
            <th><font><font>Table heading</font></font></th>
            <th><font><font>Table heading</font></font></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row"><font><font>1</font></font></th>
            <td><font><font>Table cell</font></font></td>
            <td><font><font>Table cell</font></font></td>
            <td><font><font>Table cell</font></font></td>
            <td><font><font>Table cell</font></font></td>
            <td><font><font>Table cell</font></font></td>
            <td><font><font>Table cell</font></font></td>
          </tr>
          <tr>
            <th scope="row"><font><font>2</font></font></th>
            <td><font><font>Table cell</font></font></td>
            <td><font><font>Table cell</font></font></td>
            <td><font><font>Table cell</font></font></td>
            <td><font><font>Table cell</font></font></td>
            <td><font><font>Table cell</font></font></td>
            <td><font><font>Table cell</font></font></td>
          </tr>
          <tr>
            <th scope="row"><font><font>3</font></font></th>
            <td><font><font>Table cell</font></font></td>
            <td><font><font>Table cell</font></font></td>
            <td><font><font>Table cell</font></font></td>
            <td><font><font>Table cell</font></font></td>
            <td><font><font>Table cell</font></font></td>
            <td><font><font>Table cell</font></font></td>
          </tr>
        </tbody>
      </table>
    </div>