HTML表格响应式怎么实现_HTML表格响应式布局设计教程

overflow-x: auto;

div

<div class="table-wrapper">
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>职业</th>
                <th>联系方式</th>
                <th>入职日期</th>
                <th>所在部门</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>30</td>
                <td>前端工程师</td>
                <td>138xxxx8888</td>
                <td>2020-01-15</td>
                <td>研发部</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>28</td>
                <td>UI设计师</td>
                <td>139xxxx9999</td>
                <td>2021-03-20</td>
                <td>设计部</td>
            </tr>
            <!-- 更多行 -->
        </tbody>
    </table>
</div>

.table-wrapper {
    width: 100%; /* 确保父元素占据可用宽度 */
    overflow-x: auto; /* 当内容溢出时显示横向滚动条 */
    -webkit-overflow-scrolling: touch; /* 提升移动端滚动体验 */
}

table {
    width: 100%; /* 表格宽度默认100% */
    border-collapse: collapse;
    min-width: 600px; /* 或者根据内容设定一个最小宽度，防止内容被挤压过度 */
}

th, td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: left;
    white-space: nowrap; /* 防止内容自动换行，保持单行显示 */
}

overflow-x: auto

<tr>

<td>

media query

display

/* 默认样式，在桌面端保持表格布局 */
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: left;
}

/* 媒体查询：当屏幕宽度小于某个值时应用 */
@media screen and (max-width: 768px) {
    table, thead, tbody, th, td, tr {
        display: block; /* 将所有表格元素设置为块级元素 */
    }

    thead tr {
        position: absolute; /* 隐藏表头，但保持其在DOM中 */
        top: -9999px;
        left: -9999px;
    }

    tr {
        border: 1px solid #ccc; /* 给每一行添加边框，使其看起来像卡片 */
        margin-bottom: 10px;
    }

    td {
        border: none; /* 移除单元格边框 */
        border-bottom: 1px solid #eee; /* 为每个单元格添加底部边框 */
        position: relative;
        padding-left: 50%; /* 为伪元素腾出空间 */
        text-align: right; /* 内容右对齐 */
    }

    td:last-child {
        border-bottom: 0; /* 最后一个单元格没有底部边框 */
    }

    td::before {
        /* 使用data-label属性作为标签 */
        content: attr(data-label);
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }
}

<!-- HTML需要为每个td添加data-label属性 -->
<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
            <th>联系方式</th>
            <th>入职日期</th>
            <th>所在部门</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="姓名">张三</td>
            <td data-label="年龄">30</td>
            <td data-label="职业">前端工程师</td>
            <td data-label="联系方式">138xxxx8888</td>
            <td data-label="入职日期">2020-01-15</td>
            <td data-label="所在部门">研发部</td>
        </tr>
        <!-- 更多行，每行每个td都需要对应的data-label -->
    </tbody>
</table>

<table>

<th>

<td>

display

table-cell

table-row

media query

table

thead

tbody

th

td

tr

display: block;

<tr>

<td>

data-label

td::before

@media screen and (max-width: 768px) {
    /* ... (上面已经提供了完整的CSS代码) ... */
    td::before {
        content: attr(data-label); /* 关键：显示data-label作为伪元素内容 */
        /* ... 其他样式 ... */
    }
}

media query

/* 默认所有列都显示 */
.table-column-department,
.table-column-entry-date {
    display: table-cell; /* 默认显示 */
}

@media screen and (max-width: 768px) {
    /* 在小屏幕上隐藏部门和入职日期列 */
    .table-column-department,
    .table-column-entry-date {
        display: none;
    }
}

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
            <th>联系方式</th>
            <th class="table-column-entry-date">入职日期</th> <!-- 添加类名以便控制显示 -->
            <th class="table-column-department">所在部门</th> <!-- 添加类名以便控制显示 -->
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>30</td>
            <td>前端工程师</td>
            <td>138xxxx8888</td>
            <td class="table-column-entry-date">2020-01-15</td>
            <td class="table-column-department">研发部</td>
        </tr>
        <!-- 更多行 -->
    </tbody>
</table>