返回
编程

css表格代码：CSS表格样式设计指南，从基础到高级

来源：网络   作者：   日期：2025-10-19 19:33:24  

css表格代码：CSS表格样式设计指南，从基础到高级

在网页设计中,表格是一种重要的布局工具，尤其在数据展示和复杂页面结构中发挥着关键作用，本文将通过实用代码示例，全面解析如何使用CSS对表格进行样式设计，从基础样式到高级技巧，帮助您打造美观且功能完善的表格界面。

基础表格样式设置

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 基础表格样式 */
        .basic-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        .basic-table th, 
        .basic-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        .basic-table th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        .basic-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        .basic-table tr:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <table class="basic-table">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>职业</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>25</td>
                <td>工程师</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>30</td>
                <td>设计师</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王五</td>
                <td>28</td>
                <td>产品经理</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

复杂表格样式实现

带有合并单元格的表格

<style>
    .complex-table {
        width: 100%;
        border-collapse: collapse;
    }
    .complex-table th, 
    .complex-table td {
        border: 1px solid #ddd;
        padding: 12px;
        text-align: left;
    }
    .complex-table th {
        background-color: #3498db;
        color: white;
    }
    .complex-table tr:nth-child(even) {
        background-color: #f2f2f2;
    }
    .complex-table tr:hover {
        background-color: #ddd;
    }
    /* 合并单元格样式 */
    .complex-table .header-row td {
        background-color: #2c3e50 !important;
        color: white !important;
    }
    .complex-table .summary-row td {
        font-weight: bold;
        background-color: #ecf0f1;
    }
</style>
<table class="complex-table">
    <tr class="header-row">
        <td colspan="2">公司财务报表</td>
        <td colspan="2">2023年度</td>
    </tr>
    <tr>
        <th>项目</th>
        <th>第一季度</th>
        <th>第二季度</th>
        <th>第三季度</th>
    </tr>
    <tr>
        <td>销售额</td>
        <td>¥120,000</td>
        <td>¥150,000</td>
        <td>¥180,000</td>
    </tr>
    <tr class="summary-row">
        <td>总计</td>
        <td>¥450,000</td>
        <td>¥480,000</td>
        <td>¥540,000</td>
    </tr>
</table>

响应式表格设计

<style>
    .responsive-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
    }
    .responsive-table th, 
    .responsive-table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }
    .responsive-table th {
        background-color: #f8f8f8;
        font-weight: normal;
    }
    .responsive-table tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    /* 小屏幕设备样式 */
    @media screen and (max-width: 600px) {
        .responsive-table {
            display: block;
            overflow-x: auto;
        }
        .responsive-table thead, 
        .responsive-table tbody, 
        .responsive-table th, 
        .responsive-table td, 
        .responsive-table tfoot {
            display: block;
        }
        .responsive-table thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }
        .responsive-table tr {
            border: 1px solid #ccc;
            margin-bottom: 10px;
        }
        .responsive-table td {
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 50%;
        }
        .responsive-table td:before {
            position: absolute;
            top: 12px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
            content: attr(data-label);
            font-weight: bold;
        }
    }
</style>
<table class="responsive-table">
    <thead>
        <tr>
            <th data-label="产品名称">产品名称</th>
            <th data-label="价格">价格</th>
            <th data-label="库存">库存</th>
            <th data-label="销量">销量</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>产品A</td>
            <td>¥199</td>
            <td>100</td>
            <td>50</td>
        </tr>
        <tr>
            <td>产品B</td>
            <td>¥299</td>
            <td>50</td>
            <td>30</td>
        </tr>
        <tr>
            <td>产品C</td>
            <td>¥399</td>
            <td>20</td>
            <td>15</td>
        </tr>
    </tbody>
</table>

高级表格样式技巧

使用CSS Grid实现复杂表格布局

<style>
    .grid-table {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 1px;
        border: 1px solid #ddd;
        font-size: 14px;
    }
    .grid-table th {
        background-color: #3498db;
        color: white;
        padding: 10px;
    }
    .grid-table td {
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }
    .grid-table tr:nth-child(even) {
        background-color: #f9f9f9;
    }
</style>
<div class="grid-table">
    <div><strong>编号</strong></div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div><strong>姓名</strong></div>
    <div>张三</div>
    <div>李四</div>
    <div>王五</div>
    <div><strong>年龄</strong></div>
    <div>25</div>
    <div>30</div>
    <div>28</div>
    <div><strong>职业</strong></div>
    <div>工程师</div>
    <div>设计师</div>
    <div>产品经理</div>
</div>

使用Flexbox实现表格样式

<style>
    .flex-table {
        display: flex;
        flex-direction: column;
        border-collapse: separate;
        border-spacing: 0;
    }
    .flex-table th, 
    .flex-table td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
    .flex-table th {
        background-color: #f2f2f2;
        font-weight: bold;
    }
    .flex-table tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    .flex-table tr:hover {
        background-color: #f1f1f1;
    }
</style>
<table class="flex-table">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>25</td>
            <td>工程师</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>30</td>
            <td>设计师</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>28</td>
            <td>产品经理</td>
        </tr>
    </tbody>
</table>

实用技巧与建议

  1. 性能优化：避免过度使用复杂的CSS选择器，特别是在大型表格中
  2. 可访问性：为表格添加适当的标题和说明，确保屏幕阅读器能够正确解析
  3. 打印样式：为打印设计专门的表格样式，确保打印效果清晰可读
  4. 渐进增强：从基本表格样式开始，逐步添加高级功能，确保基础功能的可用性

通过以上代码示例和技巧,您可以根据实际需求灵活运用CSS表格样式，创建既美观又实用的表格界面，无论是数据展示还是复杂布局，CSS都能提供强大的样式支持。

css表格代码：CSS表格样式设计指南，从基础到高级

css表格代码：CSS表格样式设计指南，从基础到高级

分类： 编程
地址： https://www.jinti.net/post/198456.html
标签：表单css代码表格的css设置css表格怎么写
责任编辑： 今题网
版权声明：除非特别标注，否则均为本站原创文章，转载时请以链接形式注明文章出处。

相关文章：

文章已关闭评论！


页面加载时长：0.052 秒 数据库查询：10 次 占用内存：1.44 MB
闽ICP备2023004790号