P3テーマでのtableは、小さい画面での表示方法が3通りあります。

<table>に、それぞれのクラス名を付与してください。

1：小さい画面では縦に並べる

<table class=”table-block”>

th1	td1
th2	td2

このスタイルを適用できるのは、th、tdと並んでいる場合だけです。

• th td td
• th th
  td td

こういう場合はおかしなことになるのでNGです。

2：小さい画面では横にスクロールさせる

<table class=”table-scroll”>

th1	td2	th3	th4
tr1 td1 もじもじもじもじ	tr-1 td2 もじもじもじもじ	tr-1 td3tr-1 td2 もじもじもじもじ	tr-1 td4tr-1 td2 もじもじもじもじ
tr2 td1tr-1 td2 もじもじもじもじ	tr2 td2tr-1 td2 もじもじもじもじ	tr2 td3tr-1 td2 もじもじもじもじ	tr-2 td-4tr-1 td2 もじもじもじもじ

thやtdの数、配置に制限はありません。

3：大きい画面と同じ

<table>

th1	td2	th3
tr1 td1	tr-1 td2	tr-1 td3
tr2 td1	tr2 td2	tr2 td3

thやtdの数、配置に制限はありません。

が、無理矢理コンテンツ幅に収まろうとするので、カラム数が多い場合、文字数が多い場合は【2】を選んだ方が無難です。

長いth

thが改行されているとみっともないのでwhitespace: nowrapを掛けていますが、長すぎると小さい画面で表がはみ出ます。

こういう場合は、

• table th { white-space: nowrap; }を否定するか、
• table.table-th-wrap th { white-space: normal; }を宣言してください。

※<table>に、クラス「table-th-wrap」を付与するだけになっているケースもあります。