如何仅通过CSS为HTML页面中的多个表格添加间距？

核心结论 #

• 如果表格是上下垂直堆叠：直接给table添加margin-bottom就能产生垂直间距，你之前看到的效果其实就是这个属性在起作用，float:bottom是无效的CSS属性，完全不需要加。
• 如果表格是左右水平排列：推荐用Flex布局配合间距设置，比浮动更省心，还不用处理布局塌陷问题。

具体实现方案 #

1. 垂直堆叠的表格（最常用场景）

直接修改原有CSS，给table加上margin-bottom即可：

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    /*width: 100%;*/
    margin-bottom: 15px; /* 可按需调整间距大小 */
}  

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {  
    background-color: #dddddd;
}

2. 水平排列的表格

推荐用Flex布局（无需处理浮动塌陷）：
首先给表格的父容器添加样式：

.table-container {
    display: flex;
    flex-wrap: wrap; /* 空间不足时自动换行 */
    gap: 15px; /* 同时设置水平和垂直方向的间距 */
}

表格保持原有样式即可，不需要加浮动：

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    /*width: 100%;*/
}  

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {  
    background-color: #dddddd;
}

如果一定要用浮动方案，注意要清除浮动避免父容器高度塌陷：

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    /*width: 100%;*/
    float: left;
    margin-right: 15px; /* 水平间距 */
    margin-bottom: 15px; /* 换行后的垂直间距 */
}

/* 给表格父元素添加清除浮动样式 */
.table-container::after {
    content: "";
    display: table;
    clear: both;
}

/* 其他样式保持不变 */
td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {  
    background-color: #dddddd;
}

关于你之前尝试的问题说明 #

• float:left没生效：默认情况下table是块级元素，会独占一行，如果表格宽度占满父容器，或者你本来想让表格上下排列，浮动后既看不到水平间距，还可能打乱原有布局。
• float:bottom是无效属性：CSS里float只有left、right、none三个合法值，你之前看到的间距效果完全是margin-bottom的功劳。

内容的提问来源于stack exchange，提问作者KansaiRobot