Question

说我有一个包含两列的HTML表，大约有100行数据。我希望在x行之后继续使用自己的表格。

它目前显示如下：

|head 1| head 2|
|------|-------|
|data 1| data 1|
|data 2| data 2|
 ...
|data 8| data 8|

我想要达到的目标是：

|head 1| head 2||head 1| head 2|
|------|-------||------|-------|
|data 1| data 1||data 5| data 5|
|data 2| data 2||data 6| data 6|
|data 3| data 3||data 7| data 7|
|data 4| data 4||data 8| data 8|

我目前的解决方案是将两个表彼此相邻并将数据拆分在后端，但我确信这是一个更好的方法。

Answer 1

您可以将默认display: table;更改为inline-table;。

您可以class使用<table class="inline">。

table.inline  {
display:inline-table;
vertical-align:top; /* or else as your needs */
}

Answer 2

您也可以尝试使用FLEXBOX，如下所示

<强> HTML

<div>
    <table>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
        </tr>
    </table>
</div>

<强> CSS

div {
     display: flex;
     flex-flow: row;
     justify-content: center;
 }
 table {
     border:1px solid red;
 }

<强> Demo

有用的网址：

如何继续将2列HTML表格显示在前x行旁边？

2 个答案: