您好！欢迎访问家园网-www.jy.wang!

家园网

您当前的位置：首页 > 计算机技术 > HTML

表格如何实现在手机上隐藏列，响应式设计

网络 作者：本站 点击：

表格如何实现在手机上隐藏列，响应式设计

html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>隐藏表格中的列</title>

    <style>
        @media only screen and (max-width: 800px) {
            table td:nth-child(4),
            table th:nth-child(4) {display: none;}
        }
        @media only screen and (max-width: 640px) {
            table td:nth-child(4),
            table th:nth-child(4),
            table td:nth-child(6),
            table th:nth-child(6),
            table td:nth-child(8),
            th:nth-child(8){display: none;}
        }
    </style>
</head>
<body style="background-image: url(bg.png);color: #fff">
<h1 align="center">招聘信息</h1>
<table width="100%" cellspacing="1" cellpadding="5" border="1">
    <thead>
    <tr>
        <th>序号</th>
        <th>职位名称</th>
        <th>招聘人数</th>
        <th>工作地点</th>
        <th>学历要求</th>
        <th>年龄要求</th>
        <th>薪资</th>
    </tr>
    </thead>
    <tbody align="center">
    <tr>
        <td>1</td>
        <td>Java高级工程师</td>
        <td>1</td>
        <td>北京</td>
        <td>本科</td>
        <td>30岁以上</td>
        <td>面议</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Java初级工程师</td>
        <td>3</td>
        <td>长春</td>
        <td>本科</td>
        <td>25岁以上</td>
        <td>面议</td>
    </tr>
    <tr>
        <td>3</td>
        <td>前端UI设计师</td>
        <td>2</td>
        <td>长春</td>
        <td>本科</td>
        <td>25岁以上</td>
        <td>面议</td>
    </tr>
    <tr>
        <td>4</td>
        <td>PHP高级工程师</td>
        <td>2</td>
        <td>北京</td>
        <td>本科</td>
        <td>30岁以上</td>
        <td>面议</td>
    </tr>
    <tr>
        <td>5</td>
        <td>产品经理</td>
        <td>1</td>
        <td>长春</td>
        <td>本科</td>
        <td>28岁以上</td>
        <td>面议</td>
    </tr>
    <tr>
        <td>6</td>
        <td>测试工程师</td>
        <td>3</td>
        <td>北京</td>
        <td>本科</td>
        <td>28岁以上</td>
        <td>面议</td>
    </tr>
    <tr>
        <td>7</td>
        <td>高级用户研究经理</td>
        <td>1</td>
        <td>北京</td>
        <td>本科</td>
        <td>30岁以上</td>
        <td>面议</td>
    </tr>
    <tr>
        <td>8</td>
        <td>高级Android开发工程师</td>
        <td>3</td>
        <td>长春</td>
        <td>本科</td>
        <td>30岁以上</td>
        <td>面议</td>
    </tr>
    </tbody>
</table>
</body>
</html>


一、代码如何实现隐藏？

这段代码使用 CSS 媒体查询（Media Query） 配合 伪类选择器 来实现响应式隐藏表格列。

核心原理

css

@media only screen and (max-width: 800px) {
    table td:nth-child(4),
    table th:nth-child(4) {
        display: none;  /* 隐藏第4列 */
    }}@media only screen and (max-width: 640px) {
    table td:nth-child(4),
    table th:nth-child(4),
    table td:nth-child(6),
    table th:nth-child(6),
    table td:nth-child(8),
    th:nth-child(8) {
        display: none;  /* 隐藏第4、6、8列 */
    }}

工作流程

  1. 当屏幕宽度 ≤ 800px 时：隐藏表格的第4列（工作地点）

  2. 当屏幕宽度 ≤ 640px 时：隐藏第4列（工作地点）、第6列（年龄要求）、第8列（薪资）

这样在小屏幕设备（如手机、平板）上，表格会自动隐藏不重要的列，避免横向滚动，提升阅读体验。

二、选择器详解

1. td:nth-child(4) 是什么？

这是一个 CSS 结构伪类选择器，含义是：

  • td：选择所有 <td> 元素（表格数据单元格）

  • :nth-child(4)：选择父元素下的第4个子元素

2. 具体示例

看你的表格结构（每行有7个单元格）：

html

<tr>
    <th>序号</th>      <!-- 第1个子元素 -->
    <th>职位名称</th>   <!-- 第2个子元素 -->
    <th>招聘人数</th>   <!-- 第3个子元素 -->
    <th>工作地点</th>   <!-- 第4个子元素 ← 被选中 -->
    <th>学历要求</th>   <!-- 第5个子元素 -->
    <th>年龄要求</th>   <!-- 第6个子元素 -->
    <th>薪资</th>       <!-- 第7个子元素 --></tr>

  • th:nth-child(4) 选中表头的"工作地点"列

  • td:nth-child(4) 选中所有数据行的"工作地点"列

注意：虽然从视觉上看这是第4列，但在CSS中它是每个 <tr> 父元素下的第4个子元素。

三、nth 是什么？

nth 是英语 "n-th" 的缩写，读作 "第n个"，是一个数学概念。

语法规则

css

:nth-child(an + b)

参数含义示例选中的元素
具体数字第几个:nth-child(4)第4个
关键字奇数/偶数:nth-child(odd)第1、3、5...个
公式等差数列:nth-child(2n+1)第1、3、5...个

常用示例

css

/* 选中第1个元素 */:nth-child(1)/* 选中所有奇数位置的元素（第1、3、5...） */:nth-child(odd)/* 选中所有偶数位置的元素（第2、4、6...） */:nth-child(even)/* 选中第2个、第4个、第6个...（2的倍数） */:nth-child(2n)/* 选中第3个、第6个、第9个...（3的倍数） */:nth-child(3n)/* 选中第2个、第5个、第8个...（每3个一组，从第2个开始） */:nth-child(3n+2)

四、完整的工作原理解析

媒体查询部分

css

@media only screen and (max-width: 800px) {
    /* 当屏幕宽度 ≤ 800px 时应用这些样式 */}

选择器组合

css

table td:nth-child(4)  /* 选择表格中所有行的第4个td单元格 */table th:nth-child(4)  /* 选择表头中第4个th单元格 */

隐藏效果

css

display: none;  /* 完全隐藏元素，不占据页面空间 */

五、代码优化建议

原代码第15行有一个小错误：

css

/* 错误写法：缺少 table 前缀 */th:nth-child(8){display: none;}/* 正确写法应该是 */table th:nth-child(8){display: none;}

优化后的完整代码

css

<style>    /* 中等屏幕（平板）：隐藏第4列 */
    @media only screen and (max-width: 800px) {
        table td:nth-child(4),
        table th:nth-child(4) {
            display: none;
        }
    }
    
    /* 小屏幕（手机）：隐藏第4、6、8列 */
    @media only screen and (max-width: 640px) {
        table td:nth-child(4),
        table th:nth-child(4),
        table td:nth-child(6),
        table th:nth-child(6),
        table td:nth-child(8),
        table th:nth-child(8) {  /* 补全 table 前缀 */
            display: none;
        }
    }</style>

六、效果演示

屏幕宽度显示哪些列隐藏哪些列
> 800px第1-7列全部显示无
641-800px第1、2、3、5、6、7列第4列（工作地点）
≤ 640px第1、2、3、5、7列第4、6、8列（注意没有第8列，所以实际隐藏第4、6列）

注意：你的表格只有7列，所以 nth-child(8) 实际上不存在，不会产生效果。

总结

  • :nth-child(n)：CSS 提供的强大选择器，可以根据元素在父元素中的位置进行选择

  • nth：数学概念，表示"第n个"

  • 实现隐藏：通过媒体查询检测屏幕宽度，用 display: none 隐藏不需要显示的列

  • 响应式设计：让表格在不同设备上都有良好的显示效果


标签：