在文章中添加table表格

知更鳥
知更鳥
知更鳥
1518
文章
6913
評論
更多
 2016年8月16日19:02:39 21 5K

 

在文章中添加table表格

響應式設計的主題在文章中添加表格一直是個難題，以下是兩個不完美的實例，供大家參考：

例一、表格超出頁面寬度部分隱藏，并利用滾動滑塊查看隱藏的部分

編輯文章時切換到文本模式，將下代碼添加進去：

  1. <div?class="table-container">
  2. ????<table>
  3. ????????<tbody><tr>
  4. ????????????<th>Header?1</th>
  5. ????????????<th>Header?2</th>
  6. ????????????<th>Header?3</th>
  7. ????????????<th>Header?4</th>
  8. ????????????<th>Header?5</th>
  9. ????????????<th>Header?6</th>
  10. ????????????<th>Header?7</th>
  11. ????????????<th>Header?8</th>
  12. ????????</tr>
  13. ????????<tr>
  14. ????????????<td>row1_cell1</td>
  15. ????????????<td>row1_cell2</td>
  16. ????????????<td>row1_cell3</td>
  17. ????????????<td>row1_cell4</td>
  18. ????????????<td>row1_cell5</td>
  19. ????????????<td>row1_cell6</td>
  20. ????????????<td>row1_cell7</td>
  21. ????????????<td>row1_cell8</td>
  22. ????????</tr>
  23. ????????<tr>
  24. ????????????<td>row2_cell1</td>
  25. ????????????<td>row2_cell2</td>
  26. ????????????<td>row2_cell3</td>
  27. ????????????<td>row2_cell4</td>
  28. ????????????<td>row2_cell5</td>
  29. ????????????<td>row2_cell6</td>
  30. ????????????<td>row2_cell7</td>
  31. ????????????<td>row2_cell8</td>
  32. ????????</tr>
  33. ????????<tr>
  34. ????????????<td>row3_cell1</td>
  35. ????????????<td>row3_cell2</td>
  36. ????????????<td>row3_cell3</td>
  37. ????????????<td>row3_cell4</td>
  38. ????????????<td>row3_cell5</td>
  39. ????????????<td>row3_cell6</td>
  40. ????????????<td>row3_cell7</td>
  41. ????????????<td>row3_cell8</td>
  42. ????????</tr>
  44. ????</tbody></table>
  45. </div>

把相應的樣式添加到主題style.css中

  1. table?{
  2. ????margin:?0;
  3. ????border-collapse:?collapse;
  4. }
  6. td,?th?{
  7. ????padding:?.5em?1em;
  8. ????border:?1px?solid?#999;
  9. }
  11. .table-container?{
  12. ????width:?100%;
  13. ????overflow-y:?auto;
  14. ????_overflow:?auto;
  15. ????margin:?0?0?1em;
  16. }
  18. .table-container::-webkit-scrollbar?{
  19. ????-webkit-appearance:?none;
  20. ????width:?14px;
  21. ????height:?14px;
  22. }
  24. .table-container::-webkit-scrollbar-thumb?{
  25. ????border-radius:?8px;
  26. ????border:?3px?solid?#fff;
  27. ????background-color:?rgba(0,?0,?0,?.3);
  28. }

源代碼出自：http://caibaojian.com/simple-responsive-table.html

實例二、使用CSS媒體查詢，屏幕小于600px時，將td屬性值取出來，放到內容區顯示。

使用方法與例一相同。

  1. <table>
  2. ??<thead>
  3. ????<tr>
  4. ??????<th>支付</th>
  5. ??????<th>日期</th>
  6. ??????<th>金額</th>
  7. ??????<th>周期</th>
  8. ????</tr>
  9. ??</thead>
  10. ??<tbody>
  11. ????<tr>
  12. ??????<td?data-label="支付">支付?#1</td>
  13. ??????<td?data-label="日期">02/01/2015</td>
  14. ??????<td?data-label="金額">$2,311</td>
  15. ??????<td?data-label="周期">01/01/2015?-?01/31/2015</td>
  16. ????</tr>
  17. ????<tr>
  18. ??????<td?data-label="支付">支付?#2</td>
  19. ??????<td?data-label="日期">03/01/2015</td>
  20. ??????<td?data-label="金額">$3,211</td>
  21. ??????<td?data-label="周期">02/01/2015?-?02/28/2015</td>
  22. ????</tr>
  23. ??</tbody>
  24. </table>

配套樣式：

  1. table?{
  2. ????border:?1px?solid?#ccc;
  3. ????width:?80%;
  4. ????margin:?0;
  5. ????padding:?0;
  6. ????border-collapse:?collapse;
  7. ????border-spacing:?0;
  8. ????margin:?0?auto;
  9. }
  11. table?tr?{
  12. ????border:?1px?solid?#ddd;
  13. ????padding:?5px;
  14. }
  16. table?th,?table?td?{
  17. ????padding:?10px;
  18. ????text-align:?center;
  19. }
  21. table?th?{
  22. ????text-transform:?uppercase;
  23. ????font-size:?14px;
  24. ????letter-spacing:?1px;
  25. }
  27. @media?screen?and?(max-width:?600px)?{
  29. ????table?{
  30. ????????border:?0;
  31. ????}
  33. ????table?thead?{
  34. ????????display:?none;
  35. ????}
  37. ????table?tr?{
  38. ????????margin-bottom:?10px;
  39. ????????display:?block;
  40. ????????border-bottom:?2px?solid?#ddd;
  41. ????}
  43. ????table?td?{
  44. ????????display:?block;
  45. ????????text-align:?right;
  46. ????????font-size:?13px;
  47. ????????border-bottom:?1px?dotted?#ccc;
  48. ????}
  50. ????table?td:last-child?{
  51. ????????border-bottom:?0;
  52. ????}
  54. ????table?td:before?{
  55. ????????content:?attr(data-label);
  56. ????????float:?left;
  57. ????????text-transform:?uppercase;
  58. ????????font-weight:?bold;
  59. ????}
  60. }

源代碼出自：http://www.webhek.com/responsive-tables-in-pure-css

以上方法，只適合比較簡單的表格，從Excel中復制過來的到表格代碼里包含尺寸樣式不能實現自適應。

繼續閱讀
歷史上的今天
八月
16
weinxin
關于本站
分享交流WordPress經驗與技巧，關注前端設計與網站制作。僅用于功能演示。
獲取本主題
售前咨詢加Q：598845006
多功能主題 Begin
WordPress 5.4 下載 WordPress

WordPress 5.4 下載

WordPress 5.4 2020年3月31日正式發布。中文版也同發布，下載地址： WordPress 5.4中文版：https://cn.wordpress.org/wordpress-5.4-z...
04月01日 316 2
WordPress 只允許游客瀏覽指定分類的文章 WordPress

WordPress 只允許游客瀏覽指定分類的文章

有童鞋問，如何實現未登錄用戶只能瀏覽指定的分類文章，這里提供一下方法。 只允許游客瀏覽指定分類的文章 網上可以找到類似的代碼： //template_redirect動作鉤子是一定會執行的，所以用這個...
03月24日 419 8
盜版主題很可怕！ WordPress

盜版主題很可怕！

主題森林相信國內 WordPress 用戶都很熟習，來自該網站的收費主題在國內盜版橫行，一些無良者對主題進行所謂優化、漢化后直接出售，更有甚者居然還有冒充國內代理的。主題森林大部分主題并不像國內主題需...
03月19日 1.4K 20
限制 WordPress 部分用戶角色進入后臺 WordPress

限制 WordPress 部分用戶角色進入后臺

有時我們想限制WordPress 部分用戶角色訪問后臺，可以通過下面的代碼實現。 限制 WordPress 部分用戶角色進入后臺 一、只允許管理員、編輯和作者角色訪問后臺 將下面代碼添加到當前主題函數...
03月17日 292 5
獲取本主題
售前咨詢加Q：598845006
多功能主題 Begin
匿名

發表評論

匿名網友 填寫信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

評論：21   其中：訪客  21   博主  0
    • 網賺博客 網賺博客 1
      2016年8月17日 07點00分 1F
      回復

      學習了，多謝分享啊

      • 我愛動感單車網 我愛動感單車網 7
        2016年8月17日 11點11分 2F
        回復

        學習了， :arrow: 對于文章中怎么加入表格，一直來不會，很是為此郁悶！

          • 我愛動感單車網 我愛動感單車網 7
            2016年9月20日 10點29分 1B
            回復

            @ 我愛動感單車網 一直很想為自己的博客在右側欄，也弄一個“最近發表+熱門文章+分類目錄+標簽云”這樣的組合，可限于技術沒法弄啊。博主啥時候可否分享下，側欄如何來實現tab選項卡這一技術嗎？謝謝！

          • Koolight Koolight 4
            2016年8月17日 11點34分 3F
            回復

            至今，文章中好像還沒加過表格。

            • boke112導航 boke112導航 5
              2016年8月17日 14點49分 4F
              回復

              好像現在有一些可以轉換為自適應的表格的工具，不過這個用得比較少，人工折騰一下也行

              • 夏日博客 夏日博客 3
                2016年8月17日 17點05分 5F
                回復

                我是直接在 dw 里面編輯好 table，然后再拷貝到 wp 編輯器里面。

                • 墨丶水瓶 墨丶水瓶 4
                  2016年8月18日 10點25分 6F
                  回復

                  不錯，贊一個
                  BootStrap Table 也可以自適應

                  • aunsen aunsen 4
                    2016年8月18日 15點39分 7F
                    回復

                    鳥哥真是及時雨

                    • namesilo namesilo 0
                      2016年8月19日 15點06分 8F
                      回復

                      萬能的wp，如果能夠直接編輯 統計圖 就更好了。

                      • 偽極客 偽極客 4
                        2016年8月19日 21點57分 9F
                        回復

                        鳥叔的主題速度很快啊

                        • 帥氣小琦琦 帥氣小琦琦 5
                          2016年8月20日 17點02分 10F
                          回復

                          其實將這個寫成一個短代碼更加合適

                          • 楊澤業 楊澤業 2
                            2016年8月21日 19點56分 11F
                            回復

                            我發現了這個博客主題，有一個很嚴重的問題，只是我買的不是官方正版的，（主要是舍不得那么多錢），誰在線的時候，可以加我測試一下，我認為買官方正版299也有的

                            • 流星雨博客 流星雨博客 0
                              2016年8月24日 17點48分 12F
                              回復

                              留個言！233

                              • 老高皇冠俱樂部 老高皇冠俱樂部 0
                                2016年8月31日 16點22分 13F
                                回復

                                網站內的表格過多會不會影響網站的收錄

                                • 閑魚 閑魚 1
                                  2016年9月4日 13點24分 14F
                                  回復

                                  簡單的可以用在線編輯器做個 表格，再文本編輯復制進去

                                  • 偽極客 偽極客 4
                                    2016年9月5日 17點34分 15F
                                    回復

                                    學習 mark

                                    • 采覓隨記 采覓隨記 1
                                      2016年9月7日 11點34分 16F
                                      回復

                                      哈哈，其實可以百度一下“html在線編輯器”，用里面的表格工具生成表格，應該自適應的。 :grin:
                                      我用的是這個：http://zaixianwangyebianji.51240.com/
                                      效果：https://www.needsth.wang/ougishi.html

                                      • 泛寶匯博客 泛寶匯博客 0
                                        2016年9月30日 17點04分 17F
                                        回復

                                        這個好用

                                        • 化工廠排煙系統 化工廠排煙系統 2
                                          2017年10月9日 16點49分 18F
                                          回復

                                          漲知識了，謝謝博主分享~