iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 29
0
自我挑戰組

資工的日常系列 第 29

HTML Bootstrap 4 Tables 續

w3school:https://www.w3schools.com/bootstrap4/bootstrap_tables.asp
前一篇:https://ithelp.ithome.com.tw/articles/10197428


前一篇有提到color的運用,但還有一個不是bootstrap的顏色。class="table-active"是hover(mouseover)滑鼠放上去的顏色。跟"table-hover"一起使用會看不出效果,是用來放在row或一塊區塊(cell/td)。

<table class="table table-hover" style="width:50%">
    ...
    <tbody>
        <tr class="table-active">
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        ...
    </tbody>....
</table>

https://ithelp.ithome.com.tw/upload/images/20180117/2010786656CBMddyFu.png


Table Head Colors:
專門為thead(table head)設計的class。加在thead的class裡。有thead-dark黑色和thead-light淺灰。

<table class="table">
    <thead class="thead-dark/light">
        <tr>
            <th>....</th>
            <th>....</th>...
        <tr>
    <thead>
    <tbody>....</tbody>
<table>

Small table:
就是小了點的table,放table的class後"table-sm"。把padding減半也能達到同樣效果。

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

Responsive Tables:
響應式table。在table的欄(columns)太多或者螢幕不夠大,網頁的寬就會因為table過大而超出。電腦瀏覽器會產生橫向拉動軸。手機板會很不美觀,需要特別把整個頁面右拉超出去才看得到內容,在有navbar時會更明顯。
https://ithelp.ithome.com.tw/upload/images/20180118/20107866CVuTQmpmDD.png
在創一個class為table-responsive的div元素包住原本的table能解決這問題。

<div class="table-responsive">
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
      <th>City</th>
      <th>Country</th>
      <th>Sex</th>
      <th>Example</th>
      <th>Example</th>
      <th>Example</th>
      <th>Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Anna</td>
      <td>Pitt</td>
      <td>35</td>
      <td>New York</td>
      <td>USA</td>
      <td>Female</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
    </tr>
  </tbody>
</table>
</div>

會在table下出現拉動bar不會去影響網頁的寬。
此外還有table-responsive-sm/md/lg/xl,會在特定大小以上時才會在table下出現拉動框,通常電腦版不太需要這東西,所以可能會用sm/md。不過還是看設計者需求。


上一篇
HTML Bootstrap 4 Tables
下一篇
HTML javascript 引入 重複html 與課程網頁成果分享
系列文
資工的日常30

尚未有邦友留言

立即登入留言