響應式設計的主題在文章中添加表格一直是個難題,以下是兩個不完美的實例,供大家參考:
例一、表格超出頁面寬度部分隱藏,并利用滾動滑塊查看隱藏的部分
編輯文章時切換到文本模式,將下代碼添加進去:
- <div?class="table-container">
- ????<table>
- ????????<tbody><tr>
- ????????????<th>Header?1</th>
- ????????????<th>Header?2</th>
- ????????????<th>Header?3</th>
- ????????????<th>Header?4</th>
- ????????????<th>Header?5</th>
- ????????????<th>Header?6</th>
- ????????????<th>Header?7</th>
- ????????????<th>Header?8</th>
- ????????</tr>
- ????????<tr>
- ????????????<td>row1_cell1</td>
- ????????????<td>row1_cell2</td>
- ????????????<td>row1_cell3</td>
- ????????????<td>row1_cell4</td>
- ????????????<td>row1_cell5</td>
- ????????????<td>row1_cell6</td>
- ????????????<td>row1_cell7</td>
- ????????????<td>row1_cell8</td>
- ????????</tr>
- ????????<tr>
- ????????????<td>row2_cell1</td>
- ????????????<td>row2_cell2</td>
- ????????????<td>row2_cell3</td>
- ????????????<td>row2_cell4</td>
- ????????????<td>row2_cell5</td>
- ????????????<td>row2_cell6</td>
- ????????????<td>row2_cell7</td>
- ????????????<td>row2_cell8</td>
- ????????</tr>
- ????????<tr>
- ????????????<td>row3_cell1</td>
- ????????????<td>row3_cell2</td>
- ????????????<td>row3_cell3</td>
- ????????????<td>row3_cell4</td>
- ????????????<td>row3_cell5</td>
- ????????????<td>row3_cell6</td>
- ????????????<td>row3_cell7</td>
- ????????????<td>row3_cell8</td>
- ????????</tr>
- ????</tbody></table>
- </div>
把相應的樣式添加到主題style.css中
- table?{
- ????margin:?0;
- ????border-collapse:?collapse;
- }
- td,?th?{
- ????padding:?.5em?1em;
- ????border:?1px?solid?#999;
- }
- .table-container?{
- ????width:?100%;
- ????overflow-y:?auto;
- ????_overflow:?auto;
- ????margin:?0?0?1em;
- }
- .table-container::-webkit-scrollbar?{
- ????-webkit-appearance:?none;
- ????width:?14px;
- ????height:?14px;
- }
- .table-container::-webkit-scrollbar-thumb?{
- ????border-radius:?8px;
- ????border:?3px?solid?#fff;
- ????background-color:?rgba(0,?0,?0,?.3);
- }
源代碼出自:http://caibaojian.com/simple-responsive-table.html
實例二、使用CSS媒體查詢,屏幕小于600px時,將td屬性值取出來,放到內容區顯示。
使用方法與例一相同。
- <table>
- ??<thead>
- ????<tr>
- ??????<th>支付</th>
- ??????<th>日期</th>
- ??????<th>金額</th>
- ??????<th>周期</th>
- ????</tr>
- ??</thead>
- ??<tbody>
- ????<tr>
- ??????<td?data-label="支付">支付?#1</td>
- ??????<td?data-label="日期">02/01/2015</td>
- ??????<td?data-label="金額">$2,311</td>
- ??????<td?data-label="周期">01/01/2015?-?01/31/2015</td>
- ????</tr>
- ????<tr>
- ??????<td?data-label="支付">支付?#2</td>
- ??????<td?data-label="日期">03/01/2015</td>
- ??????<td?data-label="金額">$3,211</td>
- ??????<td?data-label="周期">02/01/2015?-?02/28/2015</td>
- ????</tr>
- ??</tbody>
- </table>
配套樣式:
- table?{
- ????border:?1px?solid?#ccc;
- ????width:?80%;
- ????margin:?0;
- ????padding:?0;
- ????border-collapse:?collapse;
- ????border-spacing:?0;
- ????margin:?0?auto;
- }
- table?tr?{
- ????border:?1px?solid?#ddd;
- ????padding:?5px;
- }
- table?th,?table?td?{
- ????padding:?10px;
- ????text-align:?center;
- }
- table?th?{
- ????text-transform:?uppercase;
- ????font-size:?14px;
- ????letter-spacing:?1px;
- }
- @media?screen?and?(max-width:?600px)?{
- ????table?{
- ????????border:?0;
- ????}
- ????table?thead?{
- ????????display:?none;
- ????}
- ????table?tr?{
- ????????margin-bottom:?10px;
- ????????display:?block;
- ????????border-bottom:?2px?solid?#ddd;
- ????}
- ????table?td?{
- ????????display:?block;
- ????????text-align:?right;
- ????????font-size:?13px;
- ????????border-bottom:?1px?dotted?#ccc;
- ????}
- ????table?td:last-child?{
- ????????border-bottom:?0;
- ????}
- ????table?td:before?{
- ????????content:?attr(data-label);
- ????????float:?left;
- ????????text-transform:?uppercase;
- ????????font-weight:?bold;
- ????}
- }
源代碼出自:http://www.webhek.com/responsive-tables-in-pure-css
以上方法,只適合比較簡單的表格,從Excel中復制過來的到表格代碼里包含尺寸樣式不能實現自適應。
繼續閱讀

關于本站
分享交流WordPress經驗與技巧,關注前端設計與網站制作。僅用于功能演示。
2016年8月17日 07點00分 1F
學習了,多謝分享啊
2016年8月17日 11點11分 2F
學習了,
對于文章中怎么加入表格,一直來不會,很是為此郁悶!
2016年9月20日 10點29分 1B
@ 我愛動感單車網 一直很想為自己的博客在右側欄,也弄一個“最近發表+熱門文章+分類目錄+標簽云”這樣的組合,可限于技術沒法弄啊。博主啥時候可否分享下,側欄如何來實現tab選項卡這一技術嗎?謝謝!
2016年8月17日 11點34分 3F
至今,文章中好像還沒加過表格。
2016年8月18日 16點19分 1B
@ Koolight
跟你一樣,截至目前還沒使用的表格,一次都還木有!
2016年8月17日 14點49分 4F
好像現在有一些可以轉換為自適應的表格的工具,不過這個用得比較少,人工折騰一下也行
2016年8月17日 17點05分 5F
我是直接在 dw 里面編輯好 table,然后再拷貝到 wp 編輯器里面。
2016年8月27日 09點59分 1B
@ 夏日博客 我也是這樣做的,我網站每篇文章都是表格形式的……
2016年8月18日 10點25分 6F
不錯,贊一個
BootStrap Table 也可以自適應
2016年8月18日 15點39分 7F
鳥哥真是及時雨
2016年8月19日 15點06分 8F
萬能的wp,如果能夠直接編輯 統計圖 就更好了。
2016年8月19日 21點57分 9F
鳥叔的主題速度很快啊
2016年8月20日 17點02分 10F
其實將這個寫成一個短代碼更加合適
2016年8月21日 19點56分 11F
我發現了這個博客主題,有一個很嚴重的問題,只是我買的不是官方正版的,(主要是舍不得那么多錢),誰在線的時候,可以加我測試一下,我認為買官方正版299也有的
2016年8月24日 17點48分 12F
留個言!233
2016年8月31日 16點22分 13F
網站內的表格過多會不會影響網站的收錄
2016年9月4日 13點24分 14F
簡單的可以用在線編輯器做個 表格,再文本編輯復制進去
2016年9月5日 17點34分 15F
學習 mark
2016年9月7日 11點34分 16F
哈哈,其實可以百度一下“html在線編輯器”,用里面的表格工具生成表格,應該自適應的。
我用的是這個:http://zaixianwangyebianji.51240.com/
效果:https://www.needsth.wang/ougishi.html
2016年9月30日 17點04分 17F
這個好用
2017年10月9日 16點49分 18F
漲知識了,謝謝博主分享~