Q&A
これだけでは分かりません。htmlおよびcssもご提示ください。念のため確認したiOSの種類やブラウザも。
css
1th{ 2 display:block; 3 4} 5td{ 6 display:block; 7 8} 9
前までは（具体的な時期はわかりません）上記のcssでセルを縦並びにできたのですが、
iOSの実機確認時に縦並びになりません。（エミュレーターでは縦になります）
以前に同じソースで製作したtableを確認しても問題ないのですが
なにか仕様が変更されましたか？
回答1件
0
気になったので以下のようなソースで調べてみました。
html
1<html> 2<head> 3 <title>?</title> 4</head> 5<body> 6 <table> 7 <thead> 8 <tr> 9 <th style="display:block;">a</th> 10 <th style="display:block;">a</th> 11 <th style="display:block;">a</th> 12 </tr> 13 </thead> 14 <tbody> 15 <tr> 16 <td style="display:block;">b</td> 17 <td style="display:block;">b</td> 18 <td style="display:block;">b</td> 19 </tr> 20 <tr> 21 <td style="display:block;">c</td> 22 <td style="display:block;">c</td> 23 <td style="display:block;">c</td> 24 </tr> 25 </tbody> 26 </table> 27</body> 28</html>
すると確かに、Chromeでは縦並びになるのが、Safariではtdが横並びのままで表示されました！
ググってみると次のような記事を発見しました。
Display:Block not working in Chrome or Safari
https://stackoverflow.com/questions/10556310/displayblock-not-working-in-chrome-or-safari
Webkit overrides display: block; and computes it to be display: table-cell; in a td when there is no <!DOCTYPE> declared for your html.
SafariはWebkitですが、WebkitではDOCTYPE宣言をしなければ、tdのdisplayプロパティをtable-cellで上書きしてしまうようです。
そこで上記のソースの先頭に<!DOCTYPE html>を追加してみたところ、Chromeと同じ縦並びになりました！
と、こういった原因ではないかと思いますが、いかがでしょうか。
投稿2017/06/16 01:11
総合スコア53
あなたの回答
tips
プレビュー
