在文章中添加table表格

知更鸟
知更鸟
知更鸟
站长
私信
2528
文章
0
粉丝
WordPress215,592阅读模式

 

在文章中添加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中复制过来的到表格代码里包含尺寸样式不能实现自适应。

本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！

WordPress编辑评论时修改评论者的IP地址
WordPress后台桌面模式：Desktop Mode
WordPress主题检测器网站和浏览器扩展
手动为XAMPP升级PHP版本
weinxin
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！
获取本主题
598845006
咨询主题请加Q：598845006
多功能主题 Begin
 
知更鸟
  • WordPress
  • WordPress主题
  • 常见问题
获取本主题
598845006
咨询主题请加Q：598845006
多功能主题 Begin
评论  21  访客  21
    • 网赚博客
      网赚博客
      浙江 杭州 1F
      回复

      学习了，多谢分享啊

      • 我爱动感单车网
        我爱动感单车网
        浙江 杭州 2F
        回复

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

          • 我爱动感单车网
            我爱动感单车网
            B1
            回复

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

          • Koolight
            Koolight
            浙江 杭州 3F
            回复

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

            • boke112导航
              boke112导航
              浙江 杭州 4F
              回复

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

              • 夏日博客
                夏日博客
                浙江 杭州 5F
                回复

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

                • 墨丶水瓶
                  墨丶水瓶
                  浙江 杭州 6F
                  回复

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

                  • aunsen
                    aunsen
                    浙江 杭州 7F
                    回复

                    鸟哥真是及时雨

                    • namesilo
                      namesilo
                      浙江 杭州 8F
                      回复

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

                      • 伪极客
                        伪极客
                        浙江 杭州 9F
                        回复

                        鸟叔的主题速度很快啊

                        • 帅气小琦琦
                          帅气小琦琦
                          浙江 杭州 10F
                          回复

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

                          • 杨泽业
                            杨泽业
                            浙江 杭州 11F
                            回复

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

                            • 流星雨博客
                              流星雨博客
                              浙江 杭州 12F
                              回复

                              留个言！233

                              • 老高皇冠俱乐部
                                老高皇冠俱乐部
                                浙江 杭州 13F
                                回复

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

                                • 闲鱼
                                  闲鱼
                                  浙江 杭州 14F
                                  回复

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

                                  • 伪极客
                                    伪极客
                                    浙江 杭州 15F
                                    回复

                                    学习 mark

                                    • 采觅随记
                                      采觅随记
                                      浙江 杭州 16F
                                      回复

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

                                      • 泛宝汇博客
                                        泛宝汇博客
                                        17F
                                        回复

                                        这个好用

                                        • 化工厂排烟系统
                                          化工厂排烟系统
                                          江苏 南京 18F
                                          回复

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

                                        匿名

                                        发表评论

                                        匿名网友

                                        拖动滑块以完成验证