Question

我试图将许多桌子放在一起。目前我正在使用float:left和固定宽度，但表格放置如下：

Wrong positions

但我希望他们这样放置：

Right positions

没有JavaScript，这甚至可能吗？如果是的话，我该怎么做呢？

编辑：

我不使用表格，因为我不知道有多少列。在大屏幕上我想拥有的不仅仅是小屏幕。可在此处找到一些演示代码：http://jsfiddle.net/9M4jn/

Answer 1

使用flexbox

例如：

<!DOCTYPE HTML>
<title>Test</title>
<style>
body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: flex-start;
    }

table {
    border: solid black 1px;
    margin: 10px auto;
    width: 30%;
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
    }

</style>

<!-- horrible placeholder data, hopefully the real tables have semantic markup -->
<table><tr><td>1</td></tr></table>
<table><tr><td>2<br>2</td></tr></table>
<table><tr><td>3<br>3<br>3</td></tr></table>
<table><tr><td>4<br>4</td></tr></table>
<table><tr><td>5</td></tr></table>
<table><tr><td>6<br>5<br>5</td></tr></table>
<table><tr><td>7</td></tr></table>

（注意，示例不包含旧浏览器的兼容性黑客。请参阅链接以获取相关指南）

Answer 2

在表格周围打一个div，给它一个宽度，然后为表格提供CSS属性display: inline-block;

<强> CSS

div.tables table {
    width:100px;
    display: inline-block;
    vertical-align:top;
}
div.tables {
    width:500px;
}

<强> HTML

<div class="tables">
    <table>
        <thead>
            <tr>
                <th>col 1</th>
                <th>col 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
            </tr>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
            </tr>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
            </tr>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
            </tr>
        </tbody>
    </table>

    <!-- snip............. -->

</div>

更新了jsfiddle：http://jsfiddle.net/j85Y9/2/

Answer 3

将表格放在表格中，如下所示：

<table>
 <tr>
  <td>#TABLES1#</td>
  <td>#TABLES2#</td>
  <td>#TABLES3#</td>
 </tr>
 <tr>
  <td>#TABLES3#</td>
  <td>#TABLES4#</td>
  <td>#TABLES6#</td>
 </tr>
 ...
</table>

Answer 4

我可以看到你想要新的第4张桌子。为此，请在每个第3个表后添加“清除”。

<div style="clear:both;"></div>

HTML表彼此相邻

4 个答案: