Liz's Blog

Bootstrap#2:Responsive Table 響應式表格

| Comments

之前在〈GemGem大亂鬥#1:Bootstrap〉、〈Bootstrap#1:導覽列Navigation Bar〉稍微討論過Bootstrap神奇的功能,接著進入到我自己很喜歡的響應式設計的部分,也就是可以隨著畫面縮放的響應式表格。

以下參考自Bootstrap Tables內容。最基本的表格設計長這樣:

<table class="table">
    <thead>
      <tr>
        <th>早餐</th>
        <th>午餐</th>
        <th>晚餐</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>蛋捲</td>
        <td>花生醬牛肉堡</td>
        <td>蛋炒飯</td>
      </tr>
    </tbody>
  </table>

常見的表格,也可以在 <table class="table"> 這行換上以下內容,會有不同的變化:
<table class="table table-striped">
<table class="table table-bordered">
<table class="table table-hover">
<table class="table table-condensed">

但如果是響應式表格,只要改成以下就可以囉!

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>早餐</th>
        <th>午餐</th>
        <th>晚餐</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>蛋捲</td>
        <td>花生醬牛肉堡</td>
        <td>蛋炒飯</td>
      </tr>
    </tbody>
  </table>
</div>

【延伸閱讀】

  1. GemGem大亂鬥#1:Bootstrap
  2. Bootstrap#1:導覽列Navigation Bar
  3. Bootstrap#2:Responsive Table 響應式表格
  4. Bootstrap#3:Responsive Image 響應式圖片

Comments

comments powered by Disqus