レスポンシブWebデザインで横並びのtable要素が縦並びになるようにしたい

現在、私が作成中のHPでは、body要素の幅を100%にし、li要素に一律で「display: table-cell;」を設定した上で、子要素のnav要素（のid="global_navi"　で設定した部分）に、以下の通りcssを適用させています。

CSS
1#global_navi{
2    clear: both;
3    overflow: hidden;
4}
5#global_navi ul{
6    width: 100%;
7    display: table;
8    table-layout: fixed;
9    text-align: center;
10}
11#global_navi ul li{
12    vertical-align: middle;
13    width: 100px;
14    margin: 5px;
15    border: solid 1px #000;
16}
17#global_navi ul li a{
18    display: block;
19    padding: 5px;
20    background-color: #007E30;
21    color: #4431FF;
22    text-decoration: none;
23}

これに対し、メディアクエリを以下の通り設定し、レスポンシブWebデザインに適用させている最中です。

CSS
1    #global_navi ul{
2        width: 100%;
3        display: table; 
4        table-layout: fixed;
5        text-align: center;
6    }
7    #global_navi ul li{
8        vertical-align: middle;
9        width: 50%;
10        margin: 5px;
11        border: solid 1px #000;
12    }
13    #global_navi ul li a{
14        display: block;
15        padding: 5px;
16        background-color: #007E30;
17        color: #4431FF;
18        text-decoration: none;
19    }

なお、適用させているHTMLファイルは、以下のようなものです。
※関係する(と思われる)箇所の抜粋であり、また個人情報の都合上、title・alt・a要素の部分を一時的に修正しております。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=4">
6<title>英語学習講座</title>
7<link rel="stylesheet" href="css/style.css">
8</head>
9<body>
10
11<header>
12<h1><a href="index.html"><img src="images/LOGO.png" alt="英語学習講座"></a></h1>
13<div id="header_contact"><a href="contact.html"><img src="images/お問い合わせ.png" alt="お問い合わせ"></a></div>
14<nav id="global_navi">
15    <ul>
16        <li class="current"><a href="index.html">HOME</a></li>
17        <li><a href="juniorhighschool.html">中学英語</a></li>
18        <li><a href="highschool.html">高校英語</a></li>
19        <li><a href="college.html">大学英語</a></li>
20        <li><a href="businessbasic.html">ビジネス英語基礎</a></li>
21        <li><a href="businesshigh.html">ビジネス英語上級</a></li>
22        <li><a href="column.html">コラム</a></li>
23    </ul>
24</nav>
25
26(中略)
27
28</body>
29</html>

現在使っている教材だと、li要素のwidthを50%に設定することでli要素が2列に並んで表示されており、これを実現させたいのですが、以下画像の通り、全体幅に合わせてli要素が2列になりません。
個々のli要素の幅を保ったまま、並びを「一行に全列集約」⇒「画面幅に応じて縦並び（今回だと2列）」になるようにしたいのですが、ul要素に「display: table;」を設定すると、レスポンシブデザインで横並びのli要素を縦に並べることは出来ないのでしょうか。あるいば別の要因で上手くいかないのでしょうか。
※教材の例では、li要素に「display: table;」は設定しておりません。

※個人情報の都合上、当該画像はモザイク処理をかけています。

※回答に必要な情報が不足しておりましたら、お申し付け下さい。
自分でも解決方法を調べてみたのですが、解決に繋がる情報に辿り着けませんでした。。。

Yorrie

2020/05/19 08:23

絶対にtableじゃないとダメですか？

kei344

2020/05/19 08:25

HTMLも提示してください。個人情報を気にするなら、別のデータをサンプル用に作ってそれのスクリーンショットを提示してください。

st-access_91s

2020/05/19 08:51

＞TatamiSteakさん li要素を横並びのボックス型にする際、ボックスを均等割り付け、中の文字を縦横共に中央揃えにしたかったため、tableにしました。その際、以下サイトを参考にしました。 https://delaymania.com/201410/web/css-table-cell-01/

Yorrie

2020/05/19 08:56

えーと、質問を変えますね。その動きと同様のものが再現できるならtable以外を使用することも検討されていますか？

st-access_91s

2020/05/19 08:59

＞kei344さんご指摘に基づき、(個人情報に絡む箇所を修正の上)HTMLのコードを提示致しました。他に必要な情報ございましたら、追加でお申し付けいただければと思います。

st-access_91s

2020/05/19 09:01

＞TatamiSteakさんボックスを均等割り付け、中の文字を縦横共に中央揃え、という条件を保てるのであれば、table以外を使用することも検討したいと考えております。

kei344

2020/05/19 12:12

https://jsfiddle.net/gw6um9ys/ 画像のように再現しません。他のCSSなどが影響しているのでは。

st-access_91s

2020/05/19 14:07

＞kei344さん改めて自身のCSSコードを上から順に辿ったのですが、li要素全体に「display: table-cell;」を掛けていたのが、縦並びにならない原因のようでした（「display: table-cell;」を削除すると、いただいたリンク先にあるように、縦並びになりました）。解決の手掛かりを提示いただき、ありがとうございます。全体的に再現したい内容の修正がもう少しで行き届きそうなので、上手くいきましたら、解決方法として投稿するかと思います。

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

回答1件

自己解決

li要素に一律で「display: table-cell;」が設定されていたのが、table要素が縦並びにならない原因でした。メディアクエリに、

CSS
1    body{ 
2        width: 100%;
3        margin: 0;
4    }
5    li{
6        display: inline-block;
7    }
8    #global_navi ul::after{
9        content: "";
10        display: inline-block;
11        width: 50%;
12        margin: 0;
13    }
14    #global_navi ul li{
15        vertical-align: middle;　←変更なし
16        width: 50%;　←変更なし
17        margin: 0;　←5pxから0に変更
18        border: solid 1px #000;　←変更なし
19        box-sizing: border-box;　←追加
20    }
21    #global_navi ul li a{
22        margin: 0;　←質問文に記載のコードは、メディアクエリでない方の同セレクタに記載済み
23    }
24

というコードを追記・修正したことで、以下画像の通り、全体幅に合わせてli要素が2列になりました。

追記・修正したコードについて説明致しますと、

①li要素に「display: inline-block;」を設定することで、横並びのボックス形式にした。
②body要素の横幅をめいいっぱい使えるようにした。
③#global_navi ul li　と　#global_navi ul li a　のmarginを0にし、#global_navi ul li　に「box-sizing: border-box;」を追記することで、個々のli要素の幅が50%ピッタリに収まるようにした。
④#global_navi ul::after　の疑似要素を上記プロパティ・値に設定することで、最後行のli要素を左詰めに配置されるようにした（厳密には、最後行のli要素の後に、個々のli要素と同じ幅・高さの空欄を配置した）。

という流れになります。

投稿2020/05/19 16:23

st-access_91s

総合スコア43