Question

我在css中使用float来垂直地显示多个表，但是float将它们之间没有任何间距放置。如何在这些表格之间插入一些空白？

table{
    float: left;
    border:none;
    border-collapse: collapse;
}

Answer 1

你应该使用保证金属性

table
{
     margin:0 10px;
}

有关信息，0对应于上边距和下边距，而左边和右边距为10。

你也可以写像margin（0 10px 0 10px）;代表 - 右 - 底 - 左

Answer 2

在这里你可以使用{display：inline}而不是float 或者您可以使用表格/元素之间的填充或边距

Answer 3

table{
display: inline;
border:none;
border-collapse: collapse;
margin:0px 0px 0px 10px

}

Answer 4

我想你正在寻找这个：JSFiddle

<强> HTML

<table border="1" class="table1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>
<table border="1" class="table2">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

<强> CSS

.table1 {
    float: left;
    margin-right: 15px;
    background: red;
}
.table2 {
    float: left;
    background: blue;
}

注意：我使用margin-right创建了table1 - 这将与table2分开。如果您有2个表，请在左表中添加margin-right，或在右表中添加margin-left。

在浮动表之间插入空格/间隙

4 个答案: