div css写表格

基础概念

div 是 HTML 中的一个块级元素，用于布局和分组内容。CSS（层叠样式表）则用于设置 HTML 元素的样式和布局。使用 div 和 CSS 结合来创建表格是一种灵活的布局方式，可以实现传统 HTML 表格（<table>）无法实现的效果。

类型

固定布局：使用固定宽度的 div 来创建表格。
流式布局：使用百分比宽度来创建自适应的表格。
网格布局：使用 CSS Grid 布局来创建复杂的表格结构。

应用场景

复杂的数据展示：当需要展示复杂的数据结构时，使用 div 和 CSS 创建的表格可以更灵活地调整布局。
响应式网页设计：在移动设备上展示表格时，使用 div 和 CSS 可以更好地适应屏幕大小。
交互式表格：结合 JavaScript，可以实现交互式的表格功能，如排序、筛选等。

示例代码

以下是一个使用 div 和 CSS 创建简单表格的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Div CSS Table</title>
    <style>
        .table {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
        }
        .row {
            display: contents;
        }
        .cell {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="row">
            <div class="cell">Header 1</div>
            <div class="cell">Header 2</div>
            <div class="cell">Header 3</div>
        </div>
        <div class="row">
            <div class="cell">Row 1, Cell 1</div>
            <div class="cell">Row 1, Cell 2</div>
            <div class="cell">Row 1, Cell 3</div>
        </div>
        <div class="row">
            <div class="cell">Row 2, Cell 1</div>
            <div class="cell">Row 2, Cell 2</div>
            <div class="cell">Row 2, Cell 3</div>
        </div>
    </div>
</body>
</html>

参考链接

常见问题及解决方法

布局不对齐：
- 确保所有 div 元素的宽度设置正确。
- 使用 display: grid 或 display: flex 来对齐元素。

响应式设计问题：
- 使用百分比宽度或 max-width 和 min-width 来实现响应式设计。
- 结合媒体查询（@media）来调整不同屏幕尺寸下的样式。
边框重叠：
- 使用 border-collapse: collapse; 来合并边框。
- 确保每个 div 元素的边框宽度一致。

通过以上方法，可以有效地使用 div 和 CSS 创建灵活、响应式的表格布局。