IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
    • 登录 注册

    在文章中添加table表格

    知更鸟发表于 2016-08-16 11:02:39
    love 0

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

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

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

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



沪ICP备19023445号-2号
友情链接