css样式实现表格布局

在CSS中，表格布局可以通过`display: table`, `display: table-row`, 和 `display: table-cell`属性来实现。这里是一个基础的例子：

.table-container {
  display: table;
  width: 100%; /* 或者根据需要设置宽度 */
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  border: 1px solid #ccc; /* 可以自定义边框样式 */
  padding: 8px; /* 内容与边界的间距 */
}

/* 样式可以根据需要调整 */
.vertical-center-cell {
  vertical-align: middle;
}

然后在HTML中应用这些类：

<div class="table-container">
  <div class="row">
    <div class="cell">列1</div>
    <div class="cell">列2</div>
  </div>
  <!-- 添加更多的行... -->
</div>

这将创建一个基本的表格布局，每一行都是一个`table-row`元素，每个单元格是`table-cell`元素。如果想让某些单元格内容垂直居中，可以添加`.vertical-center-cell`类。