1

2 つのテーブルを並べて配置しようとしています。

<table class="inline">
</table>
<table class="inline">
</table>

しかし、インラインテーブルからインライン、インラインブロックまで、インラインの表示プロパティに割り当てる値はどれも機能しないため、困惑しており、アドバイスをいただければ幸いです。他に関連する質問が 1 つだけ見つかりました。HTML テーブルをインラインで作成するにはどうすればよいですか。残念ながら、解決策は機能しませんでした。

4

2 に答える 2

3

デフォルトでは、テーブルはブロック レベルの要素であり、表示プロパティを変更して 1 行に 2 つ以上のテーブルを取得する必要があります。次に例を示します。

<table class="inline">
    <tr><td>First table row 1</td></tr>
    <tr><td>First table row 2</td></tr>
</table>
<table class="inline">
    <tr><td>Second table row 1</td></tr>
    <tr><td>Second table row 2</td></tr>
</table>

次の CSS を使用します。

.inline { 
    outline: 1px solid blue;
    width: 49%;
    display: inline-block;
}

を使用することもできますがinline-table、どちらも同じ結果になります。幅を設定しない場合、コンテンツに合わせて各テーブルによって最小幅が決定されます。幅を設定すると、2 つのテーブルを同じ幅にすることができます。これは望ましい場合があります。

を試すdisplay: inlineと、表の幅がコンテンツに合わせて縮小されます。これは、一部のアプリケーションでは好ましい場合があります。この場合、幅の設定は無視されます。

次のフィドルで 3 つのケースを示しました。

フィドル参照: http://jsfiddle.net/audetwebdesign/m4fdG/

于 2013-03-30T17:47:29.930 に答える
1

次のようなものであってはなりません。

<table class="inline">
</table>
<table class="inline">
</table>

そのはず：

<table style="display:inline">
</table>
<table style="display:inline">
</table>
于 2013-03-30T17:46:09.390 に答える