HTML – Responsive Table 寫法

HTML 部份

<html>
<body>
    <table>
        <tr>
            <td>A1</td>
            <td>A2</td>
            <td>A3</td>
            <td>A4</td>
        </tr>
        <tr>
            <td>B1</td>
            <td>B2</td>
            <td>B3</td>
            <td>B4</td>
        </tr>
        <tr>
            <td>C1</td>
            <td>C2</td>
            <td>C3</td>
            <td>C4</td>
        </tr>
        <tr>
            <td>D1</td>
            <td>D2</td>
            <td>D3</td>
            <td>D4</td>
        </tr>
    </table>
</body>
</html>

CSS 部份

<style>
    body {
        margin: 0;
    }
    
    table {
        width: 100%;
        border-style: hidden;
        border-collapse: collapse;
    }
    
    table td {
        border: 2px solid;
    }
    
//少於768px 時 td闊度改為49% 即每行顯示2個column (原本是每行顯示4個column)
    @media screen and (max-width: 768px) {
        table tr {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        table td {
            width: 49%;
            position: relative;
        }
    }
</style>

以下為td tag 附帶標題的範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        box-sizing: border-box;
        font-family: "Avenir", "Helvetica", sans-serif;
    }
    
    body {
        background-color: #f9f9f9;
    }
    /* Default table styles for this demo */
    
    table {
        border-collapse: collapse;
        text-align: left;
        width: 100%;
    }
    
    table tr {
        background: white;
        border-bottom: 1px solid
    }
    
    table th,
    table td {
        padding: 10px 20px;
    }
    
    table td span {
        background: #eee;
        color: dimgrey;
        display: none;
        font-size: 10px;
        font-weight: bold;
        padding: 5px;
        position: absolute;
        text-transform: uppercase;
        top: 0;
        left: 0;
    }
    /* Simple CSS for flexbox table on mobile */
    
    @media(max-width: 800px) {
        table thead {
            left: -9999px;
            position: absolute;
            visibility: hidden;
        }
        table tr {
            border-bottom: 0;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin-bottom: 40px;
        }
        table td {
            border: 1px solid;
            margin: 0 -1px -1px 0;
            padding-top: 35px;
            position: relative;
            width: 50%;
        }
        table td span {
            display: block;
        }
    }
</style>
<body>
    <table>
        <thead>
            <tr>
                <th>Type of Food</th>
                <th>Calories</th>
                <th>Tasty Factor</th>
                <th>Average Price</th>
                <th>Rarity</th>
                <th>Average Rating</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><span>Type of Food</span> Slice of Pizza</td>
                <td><span>Calories</span> 450</td>
                <td><span>Tasty Factor</span> 95%</td>
                <td><span>Average Price</span> $5.00</td>
                <td><span>Rarity</span> Common</td>
                <td><span>Average Rating</span> 8/10</td>
            </tr>
            <tr>
                <td><span>Type of Food</span> Hamburger</td>
                <td><span>Calories</span> 350</td>
                <td><span>Tasty Factor</span> 87%</td>
                <td><span>Average Price</span> $3.50</td>
                <td><span>Rarity</span> Common</td>
                <td><span>Average Rating</span> 7.5/10</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

示範效果

Document

Type of Food	Calories	Tasty Factor	Average Price	Rarity	Average Rating
Type of Food Slice of Pizza	Calories 450	Tasty Factor 95%	Average Price $5.00	Rarity Common	Average Rating 8/10
Type of Food Hamburger	Calories 350	Tasty Factor 87%	Average Price $3.50	Rarity Common	Average Rating 7.5/10