如何做 - 并排表格
学习如何使用 CSS 创建并排表格。
如何使表格并排
如何使用 CSS float 属性创建并排表格
示例
* {
box-sizing: border-box;
}
/* 创建两列布局 */
.column {
float: left;
width: 50%;
padding: 5px;
}
/* 清除浮动 (清除浮动) */
.row::after {
content: "";
clear: both;
display: table;
}
自己动手试一试 »
如何使用 CSS flex 属性创建并排表格
注意： Flexbox 在 Internet Explorer 10 及更早版本中不受支持。您可以使用浮动或 Flex。但是，如果您需要支持 IE10 及更早版本，则应使用浮动。
提示: 要了解更多关于Flexbox布局模块的信息，阅读我们的CSS Flexbox章节。
添加响应式功能
上面的示例在移动设备上看起来不会很好，因为两列会占用过多的页面空间。要创建响应式表格，使其在屏幕尺寸小于 600 像素时从两列布局变为全宽布局，请添加以下媒体查询：
示例
/* 响应式布局 - 使两列在屏幕尺寸小于 600 像素时堆叠在彼此之上，而不是并排排列 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
自己动手试一试 »
提示：访问我们的 CSS 表格教程，了解更多关于如何样式化表格的信息。
提示：访问我们的 CSS 浮动教程，了解更多关于 float 属性的信息。
提示：访问我们的 CSS Flexbox 教程，了解更多关于 flex 属性的信息。
