如何做 - 並排表格
學習如何使用 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 屬性的資訊。
