ぱたぱたアニメ館

このCSSは、「画面の幅が 767px 以下になったら、 テーブルを縦積みブロックに変換し、最後のセルにだけ下線を残す」という処理を行っています。

1. テーブルの幅調整

@media screen and (max-width: 767px) {
  table {
    width: 98%;
  }
}

効果：画面幅が狭い（スマホなど）場合に、テーブルの幅を広げて 親要素に対して 98% に設定しています。これは見た目の調整です。

2. 縦積みブロックへの変換

@media screen and (max-width: 767px) {
  th, td {
    display: block;
    width: 100%;
    border-bottom:none;
  }
}

display: block;

これが縦並びを実現する核。本来、th と td は display: table-cell;という特別な表示形式で振る舞い、横に並びます。 これを block レベル要素に強制変換することで、各セルが画面幅いっぱいの独立したボックスとなり、縦に積み上がります。

width: 100%;

ブロック要素になったセルが、親要素（この場合は tr 、正し tr も自動的にブロックのように振る舞う）の幅全体を占めるようにします。

border-bottom: none;

デフォルトで設定されている各セル（th, td）の下側の境界線を一旦すべて消去しています。 これは、縦並びになったときに、テーブルの内側の線が二重になったり、デザインが崩れたりするのを防ぐためです。

3. 最後のセルにだけ境界線を復活

@media screen and (max-width: 767px) {
	tr:last-child td:last-child {
		border-bottom: 1px solid #bbb;
	}
}

tr:last-child td:last-child

最後の行 (tr:last-child) の中の最後のセル (td:last-child) を正確に指定するセレクタです。 2x2 テーブルの場合、これは一番右下のセル（OPQRSTUのセル）を指します。

border-bottom: 1px solid #bbb;

セクション 2 で全てのセルから消去した下側の境界線を、この最後のセルにのみ復活させています。

4. 結論

この仕組みにより、画面が狭くなったとき、全てのセルが縦に並びます。 そして、すべてのセルから下線が消えることで縦積みになったセルの間が区切られなくなる代わりに、 テーブルの最後のセルにだけ下側の境界線を復活させ、表の終わりを明確に示しています。

ブラウザは、HTMLタグごとに「これはどういう振る舞いをする要素か？」をdisplay（表示形式）で決めています。 例えば、 div は次のように扱われます。

display: block;

テーブルのタグにも、それぞれ 特別な display の種類が決まっています。

HTMLタグ

内部的なdisplay

table

table

tr

table-row

th / td

table-cell

table → display: table

「これは表全体です」とブラウザに伝える display です。

• 表としてまとめる
• 枠線を計算
• 幅の自動調整
• 行やセルを配置

tr → display: table-row

「これは1行です」という意味。

• 子要素（th や td）を横に並べる
• 行として扱う
• 表の高さを決める

tr 自体は見えないけど、行のまとまりとして働きます。

th / td → display: table-cell

「これは表の1つのセル」

• 横並びになる
• 特有の枠線処理
• セルの幅や高さを計算
• vertical-align が効く
• background などもセルとして作用

block や inline では実現できない、テーブルならではの位置合わせや幅調整が行われます。

table-row の中の table-cell は 自動で横に並びます。

これは display: table-cell の特徴です。

スマホで「縦に積む」仕組みが自然に動く理由

上記のコードでは th / td をこのように指定しました。

th, td {
  display: block;
}

これによりtable-cell → block に変化し、 横並びではなく、縦に積まれることになりました。

しかし tr は table-row のままでも動きます。（ブラウザが内部的に補正してくれる） その結果、スマホでは綺麗に縦並びになるという仕組みです。

まとめ（意味一覧）

これらのおかげで、HTMLのテーブルは「表」として成立します。