ul li によるtableの再現について

リストもしくはその他のタグでtableタグのようなレイアウトを組みたいと思っています。
理由としてはレスポンシブ時にtableだとレイアウトの制限が多いと感じているからです。

下記のように組みたいのですが、例えばflexを使用した場合ですと、コンテンツ量に応じて余白スペースが変わるので業によって違いが出てきてしまいます。
calcや%で指定するのではなく、liを増やしても自動で幅が変わるようなコードが理想です。
javascriptも使わないのが理想です。
何卒よろしくお願いいたします。

html
1      <div>
2        <ul class="list_table list_table_head">
3          <li>氏名</li>
4          <li>部署</li>
5          <li>生年月日</li>
6          <li>入社日</li>
7          <li class="row_2">備考欄</li>
8        </ul>
9        <ul class="list_table list_table_body">
10          <li>山田太郎</li>
11          <li>営業部</li>
12          <li>2018/02/23</li>
13          <li>2018/02/23</li>
14          <li class="row_2">サンプルテキスト</li>
15        </ul>
16        <ul class="list_table list_table_body">
17          <li>佐藤大五郎</li>
18          <li>企画営業部</li>
19          <li>2018/02/23</li>
20          <li>2018/02/23</li>
21          <li class="row_2">サンプルテキストサンプルテキスト</li>
22        </ul>
23      </div>

css
1.list_table {
2  display: -webkit-flex; display: flex;
3  -webkit-flex-wrap: nowrap; flex-wrap: nowrap;
4}
5.list_table > li {
6  -webkit-flex: 1 0 auto; flex: 1 0 auto;
7}
8.list_table > li.row_2 {
9  -webkit-flex: 2 0 auto; flex: 2 0 auto;
10}

行動規範の内容に同意します

回答3件

ベストアンサー

tableのようなというならtableしかないような気がしますが、どうでしょうか？

CSS
1div {
2  display: table;
3}
4
5div > ul.list_table {
6  display: table-row;
7}
8
9div > ul.list_table > li {
10  display: table-cell;
11}

投稿2018/02/23 08:49

x_x

総合スコア13749

hiroakitajima

2018/02/23 09:12

回答ありがとうございます。 display:table;を今まで使ってこなかったのですが、こういう使い方ができたとは、、、これで全て解決されました。ありがとうございました！

行動規範の内容に同意します

無理矢理ですが、別解を。

HTML
1<div class="list_table_wrapper">
2  <dl class="list_table">
3    <dt>氏名</dt>
4    <dd>山田太郎</dd>
5    <dd>佐藤大五郎</dd>
6  </dl>
7  <dl class="list_table">
8    <dt>部署</dt>
9    <dd>営業部</dd>
10    <dd>企画営業部</dd>
11  </dl>
12  <dl class="list_table">
13    <dt>生年月日</dt>
14    <dd>2018/02/23</dd>
15    <dd>2018/02/23</dd>
16  </dl>
17  <dl class="list_table">
18    <dt>入社日</dt>
19    <dd>2018/02/23</dd>
20    <dd>2018/02/23</dd>
21  </dl>
22  <dl class="list_table row_2">
23    <dt>備考欄</dt>
24    <dd>サンプルテキスト</dd>
25    <dd>サンプルテキストサンプルテキスト</dd>
26  </dl>
27</div>

CSS
1div.list_table_wrapper {
2  display: flex;
3}
4
5.list_table {
6  display: flex;
7  flex-flow: column nowrap;
8}
9
10.list_table > * {
11  flex: 1 0 auto;
12  margin:0;
13  padding: 10px;
14  border: 1px solid gray;
15}
16
17.list_table.row_2 > * {
18  flex: 2 0 auto;
19}

投稿2018/02/23 09:10

root_jp

総合スコア4666

CSS
1#tbl{
2/*table*/
3display:table;
4border-collapse:collapse;
5table-layout: auto;
6}
7#tbl .list_table_head{
8/*thead*/
9display:table-header-group;
10}
11#tbl .list_table_body{
12/*tbody*/
13display:table-row-group;
14}
15#tbl .list_table_head li{
16/*th*/
17text-align:center;
18font-weight:bold;
19}
20#tbl ul{
21/*tr*/
22display:table-row;
23}
24#tbl li{
25/*td*/
26display:table-cell;
27border:solid 1px #000000;
28}

HTML
1<div id="tbl">
2<div class="list_table_head">
3<ul>
4<li>氏名</li>
5<li>部署</li>
6<li>生年月日</li>
7<li>入社日</li>
8<li>備考欄</li>
9</ul>
10</div>
11<div class="list_table_body">
12<ul>
13<li>山田太郎</li>
14<li>営業部</li>
15<li>2018/02/23</li>
16<li>2018/02/23</li>
17<li>サンプルテキスト</li>
18</ul>
19<ul>
20<li>佐藤大五郎</li>
21<li>企画営業部</li>
22<li>2018/02/23</li>
23<li>2018/02/23</li>
24<li>サンプルテキストサンプルテキスト</li>
25</ul>
26</div>
27</div>