如何使用CSS实现表格响应式适配小屏幕？

步骤1：更新HTML代码 #

在HTML的<head>标签中添加外部CSS文件的引用：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Bike Trails</title>
    <link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Cabin&display=swap" rel="stylesheet">
    <!-- 引入外部CSS文件 -->
    <link rel="stylesheet" href="styles.css">
</head>

<body>
        <header>
            <h1> Wisconsin Bike Trails </h1>
        </header>

        <section>
            <table>
                <caption>A dollar sign ($) indicates that bikers age 16 and older must have a state trail pass.</caption>
                <thead>
                    <tr>
                        <th>Park, Forest or Trail Name</th>
                        <th>Miles</th>
                        <th>Fee</th>
                        <th>Surface</th>
                        <th>Electric bicycles </th>
                    </tr>
                </thead>
                <!-- 表格原有内容保持不变，此处省略重复代码 -->
                <tr>
                    <td colspan="5">Data source: https://dnr.wi.gov/topic/parks/activities/bike.html</td>
                </tr>
            </table>
        </section>
        <footer>
            <img src="images/cycling_bikes_lg3.png" alt="" />
            <p><small>&copy; 20xx - (Add your name.) </small></p>
            <p><small>Image source: https://www.clipart.email/download/2257249.html</small></p>
        </footer>
</body>

</html>

步骤2：编写外部CSS文件（styles.css） #

以下是包含基础样式和小屏幕适配的CSS代码，完全符合要求：

/* 基础全局样式 */
body {
    font-family: 'Cabin', sans-serif;
    margin: 0;
    padding: 1rem;
    line-height: 1.5;
}

header h1 {
    font-family: 'Permanent Marker', cursive;
    text-align: center;
    font-size: 2.5rem;
    margin: 1rem 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

caption {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

th, td {
    border: 1px solid #ddd;
    padding: 0.75rem;
    text-align: left;
}

th {
    background-color: #f5f5f5;
    font-weight: bold;
}

footer {
    text-align: center;
    margin-top: 2rem;
}

footer img {
    max-width: 100%;
    height: auto;
}

/* 小屏幕适配（宽度≤750px） */
@media screen and (max-width: 750px) {
    /* 将表格元素转为块级，实现堆叠布局 */
    table, thead, tbody, th, td, tr {
        display: block;
    }

    /* 隐藏原始表头行，通过伪元素显示表头内容 */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        margin-bottom: 1rem;
        border: 1px solid #ddd;
    }

    td {
        border: none;
        border-bottom: 1px solid #ddd;
        position: relative;
        padding-left: 50%;
    }

    /* 为每个单元格添加对应表头标签 */
    td:before {
        position: absolute;
        top: 0.75rem;
        left: 0.75rem;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
    }

    td:nth-of-type(1):before { content: "Park, Forest or Trail Name"; }
    td:nth-of-type(2):before { content: "Miles"; }
    td:nth-of-type(3):before { content: "Fee"; }
    td:nth-of-type(4):before { content: "Surface"; }
    td:nth-of-type(5):before { content: "Electric bicycles"; }

    /* 适配小屏幕的字体大小 */
    header h1 {
        font-size: 5vw;
    }

    caption {
        font-size: 4vw;
    }

    td, td:before {
        font-size: 3.5vw;
    }

    footer p {
        font-size: 3vw;
    }
}

关键说明 #

• 标题使用指定的Permanent Marker手写字体，正文使用Cabin无衬线字体
• 小屏幕下表格转为堆叠布局，通过CSS伪元素保留表头信息，保证数据可读性
• 所有单位仅使用rem、vw、%，符合要求
• 未给HTML添加任何ID或类，完全依赖标签选择器实现样式

内容的提问来源于stack exchange，提问作者Recluse316