html中使用div盒子模型怎么画表格才能避免表格边框的重叠

在HTML中，通常使用`<table>`元素来创建表格，而`<div>`并不是直接用于构建表格的标签。如果你想通过`<div>`模拟表格布局，可以利用CSS的盒模型来控制元素之间的间距和布局，避免边框重叠。以下是基本步骤：

1. **创建行和列**：使用`<div>`并设置`display: flex`或`grid`属性作为容器，创建行和列。例如：

   <div class="container">
     <div class="row">
       <!-- 这里放列的内容 -->
     </div>
     <!-- 可以添加更多行 -->
   </div>

2. **添加样式**：
- 对`.container`设置宽度，使其成为固定宽度的网格容器。
- 对`.row`设置`display: flex` 或 `display: grid` 和适当的行高(`line-height`)来模仿表格行。
- 使用`border`属性给每个`.column`定义边框，并通过负margin调整相邻元素间的距离。

.container {
  display: flex;
  width: 100%;
  /* 添加其他必要样式 */
}

.row {
  display: flex; /* 或者 display: grid; */
  line-height: 1; /* 设置行高等于单元格高度 */
  border-bottom: 1px solid; /* 添加边框 */
}

.column {
  flex: 1; /* 或者 grid-column: 1 / span N; */
  margin-right: -1px; /* 避免边框重叠 */
  border-left: 1px solid; /* 左侧边框 */
}

记得在最后一个 `.column` 后添加清除浮动，例如 `.column:last-child { margin-right: 0; }`。