頭の th を固定幅に他は可変幅にしたいのですが，すべて可変幅になります。

Question

576px以上のときは
th .first を固定幅にし，それ以外のth/tdは可変にしたい。
それで「th .firstのwidth: 140px」としてしたのですが，固定されません。

以下，2点についてお教えてください。
1 th .first を固定幅にする方法
2 .thuと.satを他のthというかtdより少し大きめにしたいので，それぞれ「widthをpx」で指定したのですが可変になります。
この場合「width: calc((100% - 140px) / 6 * 0.8)」（計算式は適当です）等のように指定しなくても可変になるのはなぜでしょうか。　(実質1と同じ質問かもしれませんが…）

tableに「table-layout: fixed」を記述してもダメでした。
コードが冗長で申し訳ありません。

//HTML
<div>
    <table>
      <thead>
        <tr>
          <th class="first">診療<br>受付時間</th>
          <th class="mon">月</th>
          <th class="tue">火</th>
          <th class="wed">水</th>
          <th class="thu">木</th>
          <th class="fri">金</th>
          <th class="sat">土</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="first">9:00～<br>12:00</th>
          <td class="mon">●</td>
          <td class="tue">●</td>
          <td class="wed">●</td>
          <td class="thu">●<br><span>12:30まで</span></td>
          <td class="fri">●</td>
          <td class="sat">●<br><span>12:30まで</span></td>
        </tr>
        <tr>
          <th class="first">14:00～<br>18:00</th>
          <td class="mon">●</td>
          <td class="tue">●</td>
          <td class="wed">●</td>
          <td class="thu">休診</td>
          <td class="fri">●</td>
          <td class="sat">休診</td>
        </tr>
      </tbody>
    </table>
  </div>

//CSS
table {
    width: 100%;
    border: 1px solid orange;
    border-collapse: separate;
    border-spacing: 2px;
    font-size: 14px;
    line-height: 1.2;
    table-layout: fixed;
  }  
  
 thead th {    
    height: 48px;
    border: 1px solid orange;    
    vertical-align: middle;
  }
    
  tbody th {
    height: 70px;   
    border: 1px solid orange; 
    vertical-align: middle;
  }
 td {
    border: 1px solid orange;    
    font-size: 20px;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
  }
  
 td span {
    font-size: 12px;
  }    
  
  tbody tr:nth-of-type(2) .sat,
  tbody tr:nth-of-type(2) .thu {
    font-size: 14px;
  }
    
  @media (min-width:576px) {
      
   .first {
      width: 140px;　  /*これが固定幅になりません*/
    }
   .first br {
      display: none;
    }
 
    thead th:not(:first-child) {
      width: 44px;
    }
  
    .thu, .sat {
      width: 70px;
    }
  
   .thu span {
      font-size: 12px;
    }
  }
  

Answer 1

結論を先に言うと、width:140pxの指定は固定幅として機能しています。

    thead th:not(:first-child) {
      width: 44px;
    }

    .thu, .sat {
      width: 70px;
    }

他の回答者の方も指摘していますが、この指定は可変にしたい要素にする指定ではありません。

2 .thuと.satを他のthというかtdより少し大きめにしたいので，それぞれ「widthをpx」で指定したのですが可変になります。

上とありますが、可変かつ他の行より大きくしたい場合は、%で指定するのが正しいです、
pxで指定をすると、他の行が指定の幅以下の場合は大きく見えるかもしれませんが、それ以上になった際に逆に小さく見えてしまいます。

この場合「width: calc((100% - 140px) / 6 * 0.8)」（計算式は適当です）等のように指定しなくても可変になるのはなぜでしょうか。　(実質1と同じ質問かもしれませんが…）

display:table;に属するtable-cell(th,td)はその要素の幅に必ずいっぱい入ろうとします。
今回、width:100%を指定したため、要素は画面の幅(厳密にいうとtableの親要素のdiv要素)いっぱいに広がります。しかし、上記の全てのtable-cellで絶対値pxの指定をしている為、tableの幅に対する要素の幅が足りなくなっています。
その為、足りない部分に無理やり幅を増やして表示され、可変に見えているのです。

以下追記、
また、現状の指定だと、そもそも

    .thu, .sat {
      width: 70px;
    }

の指定は無視されるはずです、それは、cssのセレクタに優先順位と呼ばれるものがあるからで、

    thead th:not(:first-child) {
      width: 44px;
    }

の指定のほうが優先順位が高く、値が上書きされている為です。
詳しくは以下リンクをご覧ください
優先順位

以下、コメントの下記に対しての追記

width:140pxの指定で固定幅になりました。ただ、classで指定しmonからwedとfriはwidth: calc((100% - 140px) * 0.15) thuとsatはwidth: calc((100% - 140px) * 0.2)指定しデベロッパーツールでもその通りに適用されているのですが、いずれも可変で同じ大きさになります。thuとsatは相対的に少し大きめにしたのですが、間違いをご指摘いただけませんか。

困ったらMDN等のリファレンスを見るようにしましょう。
calcのMDNには以下とあります。

自動レイアウトおよび固定レイアウトのテーブルで列・列グループ・行・行グループ・セルの幅や高さに対してパーセンテージを含む数式を指定すると、 auto が指定されたものとして扱います。

この場合は以下とすることでやりたいことができるでしょう。

    .mon,.tue,.wed,.fri {
      width: 15%;
    }

    .thu, .sat {
      width: 20%;
    }

なぜ、親要素の100%から140pxを引かなくてよいのかという疑問があるかもしれませんが、そこは私は憶測でしか回答できません。すみません。(調べましたが、正確な仕様としての記述が見つかりませんでした。)
恐らく、display:tableの仕様で子要素の絶対値を優先するような決まりがあるのだと思います。
(親要素にdisplay:blockを指定すると相対値が優先される)
まあ、この辺は私は感覚で指定してしまっていてこういうもんなんだと覚えてしまってますが。
気になるのであれば、新しく質問してもよいかもしれませんね。

Comments

[makosankibu]

絶対値と相対値について調べるといいかもしれませんね。

[TakuF]

とても勉強になりました！

[blackcoffee]

遅くなりましてごめんなさい。ありがとうございます。なぜpx指定しても可変になったのか理由がわかりました。

width:140pxの指定で固定幅になりました。ただ、classで指定しmonからwedとfriはwidth: calc((100% - 140px) * 0.15) thuとsatはwidth: calc((100% - 140px) * 0.2)指定しデベロッパーツールでもその通りに適用されているのですが、いずれも可変で同じ大きさになります。thuとsatは相対的に少し大きめにしたのですが、間違いをご指摘いただけませんか。

[blackcoffee]

無事解決しました。本当にありがとうございます。

Answer 2

擬似要素について詳しくないので細かい説明はできませんが
th .first を固定幅にし，それ以外のth/tdは可変にしたい。との記述であればここの指定は不必要ではありませんか？
気になったくらいなので解決できなければごめんなさい。

    thead th:not(:first-child) {
      width: 44px;
    }

Comments

[blackcoffee]

指定しないと中身の大きさに応じたwidthになり可変になるのですが、木・土は他の曜日より大きくしたいので、各曜日のセルにwidthを指定しました。

[TakuF]

擬似要素に関しては
thead th>:not(:first-child)
として誰の子要素かを記入しないといけないみたいです！

また、可変させたい部分以外にwidthを指定してはいかがでしょうか？
widthを指定していないところだけはページに合わせて可変。。。というかんじで

[blackcoffee]

遅くなりましてごめんなさい。ありがとうございます。
疑似要素をやめてclass指定にしました。それでもうまくいかないんです。
もう一度、教えて下さい。
詳細はmakosankibuさんへのコメント欄をごらんください。

[TakuF]

どううまくいかないかを知りたいので記述など含めてもう一度今の現状を見せていただけますか？

[blackcoffee]

自己解決しました。CSSの「table」に「table-layout: fixed」を指定したのが誤りでした。削除したら上手くいきました。
下手な質問の仕方でまた返事も遅いのにお付き合いいただきありがとうございます。感謝します。