如何創建：并列表格

如何并排表格

如何使用 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