同じ行に2つのテーブルを作成する

みなさん、こんにちは。

同じ行に2つのテーブルを作成することは可能でしょうか?例えば、左側に1つ、右側に1つ配置するような感じです。


デフォルトでは不可能ですが、data 属性を持つ div で 2 つのテーブルを囲むことで実現できます。その data 属性をサイトのテーマでターゲットとし、2 列のテーブルを作成します。以下は基本的な例です。私は CSS の専門家ではありませんので、必要に応じて CSS を調整してください。

元の投稿内容:

<div data-two-column-table>

|foo|bar|
|---- | ----|
|this|that|

</div>

<div data-two-column-table>

|foo|bar|
|---- | ----|
|this|that|

</div>

テーマの CSS(Discourse がテーブルを囲む .md-table div をターゲットにしている点に注意してください):

div[data-two-column-table] .md-table {
    width: 50%;
    display: inline-block;
    float: left;
}

期待される出力:

この方法でテーブルをスタイル化する際の欠点として、サイトから送信されるメールではスタイルが保持されない可能性があります。

なるほど、ご連絡ありがとうございます!