HTML 如何做拉伸表格？实用技巧与示例展示

2024-03-19 03:58:42 谷歌SEO ℃

如何使用HTML、CSS和JavaScript创建自适应宽度的拉伸表格

如何设置基础HTML结构？

你需要创建一个基本的HTML表格结构，使用

, ,

等元素来构建你的数据表。

如何应用基本CSS样式？

为了让表格在不同设备上看起来整齐，你可以移除任何单元格之间的间距，并给表格添加边框。

table {
    border-collapse: collapse; /* 合并边框 */
    width: 100%; /* 使表格宽度填充其父元素 */
}
th, td {
    border: 1px solid #ddd; /* 给单元格添加边框 */
    padding: 8px; /* 内边距 */
    text-align: left; /* 文本左对齐 */
}

如何添加响应式特性？

要让表格具有响应性，可以使用媒体查询（Media Queries）来改变小屏幕上表格的布局，可以设置当屏幕小于一定尺寸时，表格显示为滚动的，并且每行只显示一个单元格。

@media screen and (max-width: 600px) {
    table, thead, tbody, th, td, tr {
        display: block; /* 让所有单元格都堆叠起来 */
    }
    thead tr {
        position: absolute;
        top: 9999px; /* 隐藏表头 */
        left: 9999px;
    }
    tr {
        margin: 0 0 1rem 0;
    }
    tr:nth-child(odd) {
        background: #ccc; /* 给奇数行添加背景色 */
    }
    td {
        border: none; /* 去掉边框 */
        border-bottom: 1px solid #eee; /* 给底部添加边框 */
        position: relative;
        padding-left: 50%; /* 左边内边距使得内容向右移动 */
    }
    td::before {
        position: absolute;
        top: 0;
        left: 6px;
        width: 45%; /* 表头内容的宽度 */
        padding-right: 10px; /* 分隔表头和内容 */
        white-space: nowrap; /* 不换行 */
    }
    td:nth-of-type(1)::before { content: "标题1"; }
    td:nth-of-type(2)::before { content: "标题2"; }
    td:nth-of-type(3)::before { content: "标题3"; }
}

以上代码示例在小屏幕上会将表格转变为一个更易于阅读的列表形式，并且每个单元格的内容旁边会显示相应的表头。