レスポンシブな表を作成したいのです

Question

前提・実現したいこと

ウェブサイトの作成で、PHPで入力したスケジュールを表にして出力しているのですが表示環境の違いで表のレイアウトが崩れてしまい困っています。
パソコンでの表示は下の画像のような形なのですが

スマートフォンでの表示は以下の画像のようになり、時間が入っている部分と入っていない部分で線の長さが違ってしまいます。

該当のソースコード

function singlecalendar($id) {
    $week = array("日", "月", "火", "水", "木", "金", "土");
    $today = strtotime(date("Y-m-d", strtotime("+3 hour")));
    echo '<div class="krc_calendar clearfix">';
    for ($i = 0; $i <= 6; $i++) {
     $yy = date('w', strtotime('+'.$i.' day'));
     $y = date('D', strtotime('+'.$i.' day', $today));
     if ( date('Y-m-d', strtotime('+'.$i.' day', $today)) == (isset($day)) ) $y = 'target';
     echo '<dl><dt class="' . mb_strtolower($y) . '">' . strtoupper(date('n/j(' . $week[$yy] . ')', strtotime('+'.$i.' day', $today))) . '</dt>';
     if ( $casttime = today_schedule($id, date('Y-m-d', strtotime('+'.$i.' day', $today))) ) {
      echo '<dd>';
      if ($casttime['starttime'] !== '0') echo esc_html($casttime['starttime']);
      echo '～';
      if ($casttime['endtime'] !== '0') echo esc_html($casttime['endtime']);
      echo '</dd></dl>';
     } else {
      echo '<dd>-</dd></dl>';
     }
    }
    echo '</div>';
   }
   function today_schedule($id, $day = '') { 
    $day = $day != '' ? $day : date("Y-m-d",strtotime("+3 hour"));
    $day = htmlentities($day, ENT_QUOTES, 'utf-8');
    $works = outschedule($day);
    if ($works && $works !='rest' && array_key_exists($id, $works) ) {
     return $works[$id];
    } else {
     return false;
    }
   }

.krc_calendar {　/*表全体のCSS */
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    font-size: 13px;
    margin: 24px 0;
   }
   .krc_calendar dl {
    border-right: 1px solid #ccc;
    width: 14.285%;/* 100割る7 */
    float: left;
    display: block;
   }
   .krc_calendar dl dt {　/*日付が入るマス目のCSS */
    border-bottom: 1px solid #ccc;
    text-align: center;
    padding: 2px;
    word-break: break-all;
   }
   .krc_calendar dl dd {　　/*時間が入るマス目のCSS */
    text-align: center;
    text-decoration: none;
    padding: 24px 2px;
    display: block;
   }

試したこと

.krc_calendar dl ddに問題があるのではないかと思い
table-layout: autoでwidth: 100%に指定して追記してみたりしたのですが効果がなく、検索のキーワードが悪いのか同じような状況に出会った人などを見つけられない状況です
（css 　表　縦線　長さ）のような形で検索しています

こういった状況に心当たりがあれば教えていただきたいです、あと検索の仕方が間違っているのであればその部分も指摘してもらえるとありがたいです。
よろしくおねがいします

補足情報（FW/ツールのバージョンなど）

初心者ですので他に必要な情報などがあれば教えていただけると助かります
「こんな情報が足りない」というだけでもありがたいです

補足情報

早速の編集リクエストと回答ありがとうございますm(_ _)m
HTMLに関してなのですが失念していました、指摘ありがとうございます

サイト作成にあたってWordPressを使用していてPHPファイルに記述されていたものを貼り付けます

Comments

[hatena19]

テーブルのHTMLも質問に追記してください。

[yamatoki]

修正依頼ありがとうございます！
これであっているといいのですが、、、

[yamatoki]

KazuhiroHatanoさんからの回答で無事に解決することができました、貴重なお時間ありがとうございます！

Answer 1

cssから推測するにhtmlは

<div class="krc_calendar">
	<dl>
		<dt>日付</dt>
		<dd>時間</dd>
	</dl>
	<dl>
		<dt>日付</dt>
		<dd>時間</dd>
	</dl>
	<dl>
		<dt>日付</dt>
		<dd>時間</dd>
	</dl>
</div>

みたいな感じですかね

やろうとしてることはfloatでは難しいですね

まあ普通にtable使う方がいいとは思いますが
dlタグのままでやるならflexでやるのがいいですかね

floatやwidthの指定はなしに
krc_calendarとdlの両方をdisplay:flexに
dlはflex-directionをcolumnに
flex-growをdtは0、dl,ddは1
flex-basisに適当な値をセットして均等になるように

Comments

[yamatoki]

早速の回答ありがとうございます！HTMLのことを完全に忘れていて申し訳ないです、、、

教えて頂いたことを早速試してみます！

[yamatoki]

KazuhiroHatanoさん、無事解決しましたありがとうございます！

教えて頂いた通り.krc_calendarにdisplay:flexを追加したことで、どの表示環境でもレイアウトが崩れることなく出力されるようになりました
どうしてそうなったのかこれから調べて見ようと思います、ありがとうございました！