响应式设计的主题在文章中添加表格一直是个难题,网上找了两个不算完美的实例,供大家参考:
实例一
表格超出页面宽度部分隐藏,并利用滚动滑块查看隐藏的部分。编辑文章时切换到文本模式,将下代码添加进去:
<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>
把相应的样式添加到主题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); }
源代码出自:http://caibaojian.com/simple-responsive-table.html
实例二
使用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>
配套样式:
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: right; 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; } }
源代码出自:http://www.webhek.com/responsive-tables-in-pure-css
评论前必须登录!
注册
社交帐号登录