操作方法 - 并排表格

了解如何使用 CSS 创建并排表格。

名	姓	年龄
吉尔	史密斯	50
前夕	杰克逊	94
约翰	美国能源部	80

名	姓	年龄
吉尔	史密斯	50
前夕	杰克逊	94
约翰	美国能源部	80

如何并排放置表格

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

示例

* {
box-sizing: border-box;
}

/* Create a two-column layout */
.column {
float: left;
width: 50%;
padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}

亲自试一试 »

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

示例

* {
box-sizing: border-box;
}

.row {
display: flex;
}

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

亲自试一试 »

笔记：Internet Explorer 10 及更早版本不支持 Flexbox。如果您想使用浮动或弹性，则由您决定。但是，如果您需要支持 IE10 及以下版本，则应使用 float。

提示：要了解有关灵活框布局模块的更多信息，阅读我们的 CSS Flexbox 章节。

添加响应能力

上面的示例在移动设备上看起来不太好，因为两列会占用太多页面空间。要创建响应式表格（应在移动设备上从两列布局变为全宽布局），请添加以下媒体查询：

示例

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other on screens that are smaller than 600 px */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}

亲自试一试 »

提示：去我们的CSS 表格教程了解有关如何设置表格样式的更多信息。

提示：去我们的CSS 浮动教程了解有关浮动属性的更多信息。

提示：去我们的CSS Flexbox 教程了解有关 flex 属性的更多信息。