在文章中添加table表格

发布时间:2020-05-07

 

在文章中添加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>
  43.     </tbody></table>
  44. </div>

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

  1. table {
  2.     margin: 0;
  3.     border-collapsecollapse;
  4. }
  5. td, th {
  6.     padding: .5em 1em;
  7.     border1px solid #999;
  8. }
  9. .table-container {
  10.     width: 100%;
  11.     overflow-y: auto;
  12.     _overflow: auto;
  13.     margin: 0 0 1em;
  14. }
  15. .table-container::-webkit-scrollbar {
  16.     -webkit-appearance: none;
  17.     width14px;
  18.     height14px;
  19. }
  20. .table-container::-webkit-scrollbar-thumb {
  21.     border-radius: 8px;
  22.     border3px solid #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.       <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. }
  10. table tr {
  11.     border: 1px solid #ddd;
  12.     padding: 5px;
  13. }
  14. table th, table td {
  15.     padding: 10px;
  16.     text-align: center;
  17. }
  18. table th {
  19.     text-transform: uppercase;
  20.     font-size: 14px;
  21.     letter-spacing: 1px;
  22. }
  23. @media screen and (max-width: 600px) {
  24.     table {
  25.         border: 0;
  26.     }
  27.     table thead {
  28.         display: none;
  29.     }
  30.     table tr {
  31.         margin-bottom: 10px;
  32.         display: block;
  33.         border-bottom: 2px solid #ddd;
  34.     }
  35.     table td {
  36.         display: block;
  37.         text-align: right;
  38.         font-size: 13px;
  39.         border-bottom: 1px dotted #ccc;
  40.     }
  41.     table td:last-child {
  42.         border-bottom: 0;
  43.     }
  44.     table td: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中复制过来的到表格代码里包含尺寸样式不能实现自适应。

大熊wordpress凭借多年的wordpress企业主题制作经验,坚持以“为用户而生的wordpress主题”为宗旨,累计为2000多家客户提供品质wordpress建站服务,得到了客户的一致好评。我们一直用心对待每一个客户,我们坚信:“善待客户,将会成为终身客户”。大熊wordpress能坚持多年,是因为我们一直诚信。我们明码标价(wordpress做网站需要多少钱),从不忽悠任何客户,我们的报价宗旨:“拒绝暴利,只保留合理的利润”。如果您有网站建设、网站改版、网站维护等方面的需求,请立即咨询右侧在线客服或拨打咨询热线:18324743309,我们会详细为你一一解答你心中的疑难。

相关文章

写给所有做网站的朋友的一封信

写给所有做网站的朋友的一封信

现在就开始执行“1+N”互联网推广和没有开始执行的人,一两天看不出任何区别; 一两个月看来差异也是微乎其微的;但在2-5年的长远时间来看的时候,你的高质量询盘不断增加,你的互联网资产已经建立完成,对手已经很难匹敌,现在你看到这段文字的时候就是最好的开始,现在就是最好的时候,马上开始“1+N”体系的整体互联网推广吧,我们和你一起,开创互联网大未来!

点击查看详情

准备开启WordPress网站建设推广?

我们相信高端漂亮的网站不应该是昂贵的,这就是wordpress对每个人都是免费的原因
wordpress建站免费入门,并提供价格合理的wordpress建站套餐。