如何创建：并列表格

如何并排表格

如何使用 CSS float 属性创建并排表格：

实例

* {
  box-sizing: border-box;
}

/* 创建两列布局 */
.column {
  float: left;
  width: 50%;
  padding: 5px;
}

/* Clearfix（清除浮动） */
.row::after {
  content: "";
  clear: both;
  display: table;
}

亲自试一试

如何使用 CSS flex 属性创建并排表格：

实例

* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

.column {
  flex: 50%;
  padding: 5px;
}

亲自试一试

注意：Flexbox 在 Internet Explorer 10 及更早版本中不受支持。是否使用 float 或 flex 取决于您。但是，如果您需要支持 IE10 及以下版本，则应使用 float。

提示：要了解有关 Flexible Box 布局模块的更多信息，请阅读我们的 CSS Flexbox 教程。

添加响应能力

上面的例子在移动设备上看起来会不太美观，因为两列会占据页面过多的空间。

为了创建响应式表格，使其从两列布局转变为移动设备上的全宽布局，请添加以下媒体查询：

实例

/* 响应式布局 - 在小于 600 像素的屏幕上，使两列堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

亲自试一试

相关页面

教程：CSS 表格

教程：CSS 浮动

教程：CSS Flexbox