2つのテーブルをインラインスタイルで表示するにはどうすればいいですか？

Question

私はインラインにそのディスプレイを設定しようとしているので、2テーブルのインラインを表示する。それは失敗:(

をインラインで表示されるためにそれらを設定する最も簡単な方法は何ですか？

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

使用display:inline-table。

MDN Reference

インラインテーブル値は、HTMLで直接マッピングを持っていません。 HTML要素のように動作しますが、ブロックレベルのボックスではなく、インラインボックスとして動作します。テーブルボックス内には、ブロックレベルのコンテキストがあります。

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

ブートストラップを使用している場合は、カラム構造を利用してみてください。

テーブルを使用しない場合floatプロパティ

table { 
    float: left; 
    } 

here is an sample code in fiddle

Answer 3

これを試してみてください。 インラインスタイルで2つのテーブルが必要な場合は、最初に外部テーブルを取得する必要があります。そしてそのテーブルの<td>には、<table>のテーブルがあります。

<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>