teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

修正

2020/05/05 07:44

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -2,9 +2,10 @@
2
2
 
3
3
  仮に「日付」「曜日」など<th>が1文字だとして、余白が1文字ぶんだとします。
4
4
  <th>1つの横幅は3em = 16px * 3 = 48px。
5
- <th>は10項目あるので、48 * 10 = 480pxです。
5
+ <th>は10項目あるので、48 * 10 = 480px。これが<table>の横幅の最低値です。
6
6
 
7
- iPhone Xの横幅が375pxなので、480pxの要素は収まりません。
7
+ **iPhone Xの横幅が375pxなので、480pxの要素は収まりません。**
8
+ 文字サイズや余白を調整すれば入るかも..と思うかもしれませんが、項目名が縦1列になるので見づらいはずです。
8
9
 
9
10
  そのため自分なら以下の2つの方法をとります。
10
11
 

1

修正

2020/05/05 07:44

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -1,6 +1,13 @@
1
- 物理的に横幅に文字が収まらないはずです。
1
+ 単純な話、物理的に横幅に文字が収まらないはずです。
2
- 自分なら以下の2つの方法をとります。
3
2
 
3
+ 仮に「日付」「曜日」など<th>が1文字だとして、余白が1文字ぶんだとします。
4
+ <th>1つの横幅は3em = 16px * 3 = 48px。
5
+ <th>は10項目あるので、48 * 10 = 480pxです。
6
+
7
+ iPhone Xの横幅が375pxなので、480pxの要素は収まりません。
8
+
9
+ そのため自分なら以下の2つの方法をとります。
10
+
4
11
  ---
5
12
  **[1] テーブル部分だけスクロールさせるようにする**
6
13