cssのflexのレイアウト

tableのようなレイアウトの中にデータ（具体的にはmarkdownのmdデータ）
を入れて表示させたいと考えています。

同じ幅のテーブルのレイアウトを表示させる骨組みを作っています。
が　うまくいきません。

flexで下記のようなレイアウトで同じ幅のテーブルになるようなcssを教えてください。

<div class="css-div-table">
_ _ <div class="css-div-tr">
_ _ _ _ <div class="css-div-td">css-div-td-data11</div>
_ _ _ _ <div class="css-div-td">css-div-td-data12</div>
_ _ _ _ <div class="css-div-td">css-div-td-data13</div>
_ _ </div>
_ _ <div class="css-div-tr">
_ _ _ _ <div class="css-div-td">css-div-td-data21</div>
_ _ _ _ <div class="css-div-td">css-div-td-data22</div>
_ _ _ _ <div class="css-div-td">css-div-td-data23</div>
_ _ </div>
</div>


.css-div-table {
_ _
}
.css-div-tr {
_ _
}
.css-div-td {
_ _
}

No.2 ベストアンサー 回答者： Ogre7077 回答日時： 2018/04/03 15:40

<style>

.css-div-table { display:flex; flex-direction:column; }
.css-div-table > .css-div-tr { display:flex; flex-direction:row; }
.css-div-table > .css-div-tr > * { padding:1em; border:thin solid black; flex:1 0 auto; }
.css-div-table > .css-div-tr > *:nth-child(n+2) { border-left:none; }
.css-div-table > .css-div-tr:nth-child(n+2) > * { border-top:none; }
.css-div-table > .css-div-tr > * { width:5em; }
.css-div-table > .css-div-tr > *:nth-child(3) { width:10em; }
</style>
<div class="css-div-table">
<div class="css-div-tr"><div>11</div><div>12</div><div>13</div></div>
<div class="css-div-tr"><div>21</div><div>22</div><div>23</div></div>
</div>

この回答へのお礼

回答ありがとうございました。

この回答は絶品でした。

とても使いやすいです。

お礼日時：2018/12/16 09:02

No.1 回答者： fujillin 回答日時： 2018/04/03 11:21

こんにちは

どのようなものをイメージなさっているのかよくわかりませんが、テーブル的なレイアウトをなさりたいのなら、いっそのことtableタグを利用するか、あるいはdisplay:tableを使った方が簡単なのではないでしょうか？

例えば
div.css-div-table{ display:table; width:100%; }
div.css-div-tr{ display:table-row; }
div.css-div-td{ display:table-cell; }
とか・・・

https://developer.mozilla.org/ja/docs/Web/CSS/di …