Wie werden zwei Tabellen mit Inline-Stil angezeigt?

Question

Ich möchte 2 Tabelle inline zeigen, also habe ich versucht, seine Anzeige auf Inline einzustellen. Es schlägt fehl :(

Was ist die einfachste Art und Weise, sie zu setzen Inline gezeigt werden?

table { 
 
    display: inline; 
 
} 
 
table, td, th { 
 
    border: 1px solid black; 
 
    }

<table> 
 
    <tr> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Lois</td> 
 
    <td>Griffin</td> 
 
    </tr> 
 
</table> 
 
<table> 
 
    <tr> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Lois</td> 
 
    <td>Griffin</td> 
 
    </tr> 
 
</table>

Answer 1

Verwendung display:inline-table.

MDN Reference

Der Inline-Tabellenwert nicht über eine direkte Zuordnung in HTML. Es verhält sich wie ein HTML-Element, aber als Inline-Box und nicht als Block-Box. In der Tabellenbox befindet sich ein Kontext auf Blockebene.

table { 
 
    display: inline-table; 
 
} 
 
table, 
 
td, 
 
th { 
 
    border: 1px solid black; 
 
}

<table> 
 
    <tr> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Lois</td> 
 
    <td>Griffin</td> 
 
    </tr> 
 
</table> 
 

 
<table> 
 
    <tr> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Lois</td> 
 
    <td>Griffin</td> 
 
    </tr> 
 
</table> 
 

 

 
<table> 
 
    <tr> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Lois</td> 
 
    <td>Griffin</td> 
 
    </tr> 
 
</table>

Answer 2

Wenn Sie Bootstrap verwenden, versuchen Sie bitte die Säulenstruktur zu nutzen.

Wenn nicht Tabelle float Eigenschaft.

verwenden versuchen 210

here is an sample code in fiddle

Answer 3

bereits. Wenn Sie 2 Tabellen im Inline-Stil wünschen, müssen Sie zuerst die äußere Tabelle übernehmen. Und in dieser Tabelle <td> können Sie innere Tabellen <table> nehmen.

<table width="1000"> 
<tr> 
<td> 
<table border="1" width="500"> 
    <tr> 
    <th>Firstname</th> 
    <th>Lastname</th> 
    </tr> 
    <tr> 
    <td>Lois</td> 
    <td>Griffin</td> 
    </tr> 
</table> 
</td> 
<td> 
<table border="1" width="500"> 
    <tr> 
    <th>Firstname</th> 
    <th>Lastname</th> 
    </tr> 
    <tr> 
    <td>Lois</td> 
    <td>Griffin</td> 
    </tr> 
</table> 
</td> 
</tr> 
</table>