css两行两列表格

发表于前端技术学习版块 css,教程

下面是一个使用CSS制作的两行两列表格示例： HTML代码如下：<div class= table > <div class= row > &a

下面是一个使用CSS制作的两行两列表格示例：

HTML代码如下：

<div class="table">
  <div class="row">
    <div class="cell">单元格1</div>
    <div class="cell">单元格2</div>
  </div>
  <div class="row">
    <div class="cell">单元格3</div>
    <div class="cell">单元格4</div>
  </div>
</div>

CSS代码如下：

.table {
  display: table;
  border-collapse: collapse;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  border: 1px solid black;
  padding: 10px;
}

展示效果如下：

单元格1

单元格2

单元格3

单元格4

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。