在文章中添加table表格

2016年08月16日19:02:39 21 4,057

在文章中添加table表格

响应式设计的主题在文章中添加表格一直是个难题,以下是两个不完美的实例,供大家参考:

例一、表格超出页面宽度部分隐藏,并利用滚动滑块查看隐藏的部分

编辑文章时切换到文本模式,将下代码添加进去:

  1. <divclass="table-container">
  2. <table>
  3. <tbody><tr>
  4. <th>Header1</th>
  5. <th>Header2</th>
  6. <th>Header3</th>
  7. <th>Header4</th>
  8. <th>Header5</th>
  9. <th>Header6</th>
  10. <th>Header7</th>
  11. <th>Header8</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>
  43. </tbody></table>
  44. </div>

把相应的样式添加到主题style.css中

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

源代码出自: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. <tddata-label="支付">支付#1</td>
  13. <tddata-label="日期">02/01/2015</td>
  14. <tddata-label="金额">$2,311</td>
  15. <tddata-label="周期">01/01/2015-01/31/2015</td>
  16. </tr>
  17. <tr>
  18. <tddata-label="支付">支付#2</td>
  19. <tddata-label="日期">03/01/2015</td>
  20. <tddata-label="金额">$3,211</td>
  21. <tddata-label="周期">02/01/2015-02/28/2015</td>
  22. </tr>
  23. </tbody>
  24. </table>

配套样式:

  1. table{
  2. border:1pxsolid#ccc;
  3. width:80%;
  4. margin:0;
  5. padding:0;
  6. border-collapse:collapse;
  7. border-spacing:0;
  8. margin:0auto;
  9. }
  10. tabletr{
  11. border:1pxsolid#ddd;
  12. padding:5px;
  13. }
  14. tableth,tabletd{
  15. padding:10px;
  16. text-align:center;
  17. }
  18. tableth{
  19. text-transform:uppercase;
  20. font-size:14px;
  21. letter-spacing:1px;
  22. }
  23. @mediascreenand(max-width:600px){
  24. table{
  25. border:0;
  26. }
  27. tablethead{
  28. display:none;
  29. }
  30. tabletr{
  31. margin-bottom:10px;
  32. display:block;
  33. border-bottom:2pxsolid#ddd;
  34. }
  35. tabletd{
  36. display:block;
  37. text-align:right;
  38. font-size:13px;
  39. border-bottom:1pxdotted#ccc;
  40. }
  41. tabletd:last-child{
  42. border-bottom:0;
  43. }
  44. tabletd:before{
  45. content:attr(data-label);
  46. float:left;
  47. text-transform:uppercase;
  48. font-weight:bold;
  49. }
  50. }

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

以上方法,只适合比较简单的表格,从Excel中复制过来的到表格代码里包含尺寸样式不能实现自适应。

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

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

目前评论:21   其中:访客  21   博主  0

    • 网赚博客 1

      学习了,多谢分享啊

      • 我爱动感单车网 7

        学习了, :arrow: 对于文章中怎么加入表格,一直来不会,很是为此郁闷!

          • 我爱动感单车网 7

            @我爱动感单车网 一直很想为自己的博客在右侧栏,也弄一个“最近发表+热门文章+分类目录+标签云”这样的组合,可限于技术没法弄啊。博主啥时候可否分享下,侧栏如何来实现tab选项卡这一技术吗?谢谢!

          • Koolight 4

            至今,文章中好像还没加过表格。

            • boke112导航 5

              好像现在有一些可以转换为自适应的表格的工具,不过这个用得比较少,人工折腾一下也行

              • 夏日博客 3

                我是直接在 dw 里面编辑好 table,然后再拷贝到 wp 编辑器里面。

                • 墨丶水瓶 4

                  不错,赞一个
                  BootStrap Table 也可以自适应

                  • aunsen 4

                    鸟哥真是及时雨

                    • namesilo 0

                      万能的wp,如果能够直接编辑 统计图 就更好了。

                      • 伪极客 4

                        鸟叔的主题速度很快啊

                        • 帅气小琦琦 5

                          其实将这个写成一个短代码更加合适

                          • 杨泽业 2

                            我发现了这个博客主题,有一个很严重的问题,只是我买的不是官方正版的,(主要是舍不得那么多钱),谁在线的时候,可以加我测试一下,我认为买官方正版299也有的

                            • 流星雨博客 0

                              留个言!233

                              • 老高皇冠俱乐部 0

                                网站内的表格过多会不会影响网站的收录

                                • 闲鱼 1

                                  简单的可以用在线编辑器做个 表格,再文本编辑复制进去

                                  • 伪极客 4

                                    学习 mark

                                    • 采觅随记 1

                                      哈哈,其实可以百度一下“html在线编辑器”,用里面的表格工具生成表格,应该自适应的。 :grin:
                                      我用的是这个:http://zaixianwangyebianji.51240.com/
                                      效果:https://www.needsth.wang/ougishi.html

                                      • 泛宝汇博客 0

                                        这个好用

                                        • 化工厂排烟系统 2

                                          涨知识了,谢谢博主分享~