表格響應式佈局實例

時間 2019-11-29

標籤表格響應佈局實例简体版

原文原文鏈接

Q1:代碼css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格響應式佈局</title>
    </head>
    <style type="text/css">
        table,th,td{
            border:1px solid red;
            border-collapse: collapse;
        }
        table{
            width: 100%;
            height: 120px;
            text-align: center;
            box-shadow: 3px 3px 3px blue;
        }
        a{
            text-decoration: none;
        }
        caption{
            font-size: 22px;
            color: green;
        }
        thead tr{
            background: blue;
            color: white;
        }
        
        @media only screen and (max-width: 900px) {
            tbody tr td:after{
                content: attr(data-label);
                float: left;
            }
            thead tr{
                display: none;
            }
            tbody tr td{
                display: block;
            }
            tbody tr{
                display: block;
                margin-bottom: 20px;
            }
            table{
                border: none;
                box-shadow: none;
            }
            tbody tr td:first-child{
                background: blue;
                color: white;
            }
            tbody tr{
                box-shadow: 2px 2px 2px blue;
            }
        }
    </style>
    <body>
        <table>
            <caption>全棧開發相關課程</caption>
            <thead>
                <tr>
                    <th>課程序號</th>
                    <th>課程名稱</th>
                    <th>課程操做</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td data-label="課程序號">180406</td>
                    <td data-label="課程名稱">css3與HTML5響應式佈局</td>
                    <td data-label="課程操做"><a href="#">修改</a>    <a href="#">刪除</a></td>
                </tr>
                <tr>
                    <td data-label="課程序號">180407</td>
                    <td data-label="課程名稱">前端工程化與模塊化開發</td>
                    <td data-label="課程操做"><a href="#">修改</a>    <a href="#">刪除</a></td>
                </tr>
                <tr>
                    <td data-label="課程序號">180408</td>
                    <td data-label="課程名稱">跨平臺移動APP開發</td>
                    <td data-label="課程操做"><a href="#">修改</a>    <a href="#">刪除</a></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>