WordPress 网站文章中如何添加table表格？响应式设计的主题在文章中添加表格一直是个难题，以下是两个不完美的实例，供大家参考。
1、例一、表格超出页面宽度部分隐藏，并利用滚动滑块查看隐藏的部分。
2、编辑文章时切换到文本模式，将下代码添加进去：
- <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>
3、把相应的样式添加到主题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);}
4、实例二、使用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>
5、配套样式：
- 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: rightright; 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; }}
6、以上方法，只适合比较简单的表格，从Excel中复制过来的到表格代码里包含尺寸样式不能实现自适应。
发表回复