如何操作 - 侧边表格
学习如何使用 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 及更早版本，则应使用浮动。
提示：要详细了解弹性盒子布局模块，请阅读我们的 CSS Flexbox 章节。
添加响应性
上面的示例在移动设备上看起来并不好，因为两列会占用页面太多空间。要创建一个响应式表格，该表格应该在移动设备上从两列布局变为全宽布局，请添加以下媒体查询
示例
/* 响应式布局 - 使两列在小于 600 像素的屏幕上堆叠在一起，而不是并排 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
尝试一下 »
提示：访问我们的CSS 表格教程，了解更多关于如何设置表格样式的信息。
提示：访问我们的CSS 浮动教程，了解更多关于浮动属性的信息。
提示：访问我们的CSS Flexbox 教程，了解更多关于 flex 属性的信息。
