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

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

.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 {
 content: attr(data-th) " : ";
 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;
}
}


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

[範例預覽] [範例下載]

相關文章

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具

「Animate.css」讓Boostrap導覽列的下拉選單動起來

「Animate.css」讓Boostrap導覽列的下拉選單動起來





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 5 梅留言

  • 第2梅
    Genie 說道:

    你好~
    檔案在 BOX, MediaFire和網易都不存在了,然後 MEGA需要輸入密碼才能下載~ 回報給你知道一下~~感謝你分享如此多的好文~~

    回應:
    感謝告知,已修正了
  • 第1梅
    karuizawa 說道:

    檔案可以下載~~但無法解密

    回應:
    檔案並沒有加密