Bootstrap教學-實現Table表格也支援RWD自適應效果

html images

雖然說現在編排網頁時,已經不再使用table了,而是使用div雖然說div很方便,但遇到表單式的內容,還是得透過table來排版,一來比較清楚,二來也比較簡單,因此table還是有它存在的必要性,但現在RWD自適應網頁當道,當在桌機版使用table沒問題,一旦切到手機版時,那可真是要命的,當表格縮到手機的可視範圍時,那可真是眼力大考驗,雖然說Bootstrap內建也支援table自適應的效果,但縮到手機模式時,表格下方則會出現左右滑動的捲軸,雖然說這也是一個不錯的解決辦法,但在操作上就覺得有些不便,因此還是盡量以條列式的方式來呈現,會比較符合手機上的操控,因此梅干就整理了一下手邊的資料,將table自適應並整合到bootstrap中,因此一樣可在bootstrap的grid system的系統來使用,完全沒問題,因此當有需要使用table表格式,不妨也可參考看看囉!


放在<style>…</style>之間:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
.rwd-table {
background: #fff;
overflow: hidden;
}
 
.rwd-table tr:nth-of-type(2n){
background: #eee;
}
.rwd-table th,
.rwd-table td {
margin: 0.5em 1em;
}
.rwd-table {
min-width: 100%;
}
 
.rwd-table th {
display: none;
}
 
.rwd-table td {
display: block;
}
 
.rwd-table td:before {
<span style="color: #ff0066;"><b>content: attr(data-th) " : ";</b></span>
font-weight: bold;
width: 6.5em;
display: inline-block;
}
 
.rwd-table th, .rwd-table td {
text-align: left;
}
 
.rwd-table th, .rwd-table td:before {
color: #D20B2A;
font-weight: bold;
}
 
@media (min-width: 480px) {
.rwd-table td:before {
display: none;
}
.rwd-table th, .rwd-table td {
display: table-cell;
padding: 0.25em 0.5em;
}
.rwd-table th:first-child,
.rwd-table td:first-child {
padding-left: 0;
}
.rwd-table th:last-child,
.rwd-table td:last-child {
padding-right: 0;
}
.rwd-table th,
.rwd-table td {
padding: 1em !important;
}
}
 
</div>

放在<body>…</body>之間:
當要使用時,在table加入.rwd-table的class名稱,接著在每個td後方加入data-th的自訂屬性名稱,當縮小到手機尺寸時,則會透過CSS3的選擇器,將data-th的值寫到區塊中,當手機模式,就會依照條列式的方式作呈現。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table class="rwd-table">
 <tr>
  <th>旅遊名稱</th>
  <th>出發日</th>
  <th>售價</th>
  <th>機位</th>
  <th>可售</th>
 </tr>
 <tr>
  <td data-th="旅遊名稱">【早鳥送、最高再省8000】亞德里亞海之珠、克斯蒙三國、雙國家公園、世界遺產遊13(含稅) </td>
  <td data-th="出發日">03/23〔三〕 </td>
  <td data-th="售價">$119,900</td>
  <td data-th="機位">26</td>
  <td data-th="可售">6</td>
 </tr>
</table>

本文出處:minwt

Be the first to comment on "Bootstrap教學-實現Table表格也支援RWD自適應效果"

Leave a comment

Your email address will not be published.


*