找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发table在pc和手机端的两种表现形式

2018-11-30 分类：JavaScript 阅读(982) 评论(0)
前端开发使用软件
常用前端软件开发软件
前端软件开发环境有哪些问题

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title></title>
        <style type=”text/css”>
            body {
                font-family: arial;
            }
            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;
                }
            }
            .note {
                max-width: 80%;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <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>
    </body>
</html>
前端开发常用软件
前端开发必备的一些软件
h5前端开发 软件
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论