質問編集履歴
1
書き方が悪くやりたいことが伝わりにくかったため
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,25 +1,31 @@
|
|
|
1
|
-
|
|
1
|
+
WordPressでウェブサイトを制作しています。
|
|
2
|
-
|
|
3
|
-
599px超：THとTDが横並び
|
|
4
|
-
|
|
2
|
+
サイトの中に表があるページがあります。
|
|
5
|
-
|
|
6
3
|
```html
|
|
7
4
|
<table>
|
|
8
5
|
<tbody>
|
|
9
|
-
<tr><th>所在地</th><td>東京都千代田区千代田３－３－３ 千代田ビル３F</d
|
|
6
|
+
<tr><th>所在地</th><td>東京都千代田区千代田３－３－３ 千代田ビル３F</td></tr>
|
|
10
7
|
<tr><th>電話番号</th><td><a href="tel:03-3333-3333">03-3333-3333</a></td></tr>
|
|
11
8
|
<tr><th>コメント</th><td>ほげほげほげほげほげほげほげほげほげほげほげほげ</td></tr>
|
|
12
9
|
</tbody>
|
|
13
10
|
</table>
|
|
14
11
|
```
|
|
12
|
+
なお、thとtdのインナーテキストは、WPから吐き出しており、ページによって文字数が異なります。
|
|
13
|
+
|
|
14
|
+
狭い画面で閲覧した場合、表中のテキストの折り返しが多くなり、見にくいので、画面が狭い場合は、thとtdを縦に並べて表示させています。
|
|
15
|
+
|
|
16
|
+
ブレイクポイントについて、本来は、下図のように、ビューポートの幅と折り返しが生じるtableの幅を比較して、前者の方が狭い場合に縦並びにしたいです。
|
|
17
|
+
|
|
18
|
+
しかし、やり方が分からないので、現状はブレイクポイントを以下のように599pxに仮置きしています。
|
|
15
19
|
```css
|
|
16
20
|
@media (max-width: 599px){
|
|
17
21
|
th,td{
|
|
18
22
|
display:block;
|
|
19
23
|
}}
|
|
20
24
|
```
|
|
25
|
+
しかし、これでは次のような問題が生じます。
|
|
26
|
+
- 画面幅が599px以下の場合、thとtdを横並びにしても画面幅が十分に足りている場合でも、不必要に縦並びになってしまう。
|
|
21
|
-
|
|
27
|
+
- 画面幅が599px超の場合、テキストに折り返しが生じている場合でも、横並びで表示される。
|
|
22
28
|
|
|
23
|
-
|
|
29
|
+
そこで、ビューポートの幅と折り返しが生じるtableの幅を比較して、前者の方が狭い場合に縦並びにする方法を助言を頂けますと大変助かります。
|
|
24
30
|
|
|
25
31
|
ビューポート幅はmatchMediaによって取得すればよいかと存じますが、折り返しが生じる要素幅をどのように取得すればよいかが分かりません。
|