Q&A
使用ブラウザ : Chrome
iPhoneとiPadの実機でテーブル内のtdを幅100%で表示したい(テーブルを縦表示に変えたい)のですが、どうやらtdに指定しているdisplay : block;が効いておらず、横長のテーブルの表示のままになってしまいます。
ブラウザはSafariではなく、Chrome限定です。iPadやiPhoneではディペロッパーツールが使用出来ない為、詳しい分析が出来ません。
なお、PCを利用してChromeのディベロッパーツールを使用して見ると、問題なくtdに指定したdisplay : blockは効いており、幅100%でtd内の文字は表示されます。(android端末でも横幅100%で表示されます。)
どのようにcssを修正すれば、iPadやiPhoneでもtdが横幅100%で表示されますでしょうか？ご教示頂きたく存じます。
html
1<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3<html xmlns="http://www.w3.org/1999/xhtml"> 4<head> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 7 <meta name="viewport" content="width=device-width,initial-scale=1" /> 8 <title>スコア情報</title> 9 <link href="./css/bootstrap.css" rel="stylesheet"> 10 <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> 11 <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 12 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/start/jquery-ui.css"> 13 <script src = 'js/bootstrap.min.js'></script> 14 <style> 15 .table{ 16 border:0; 17 position: relative; 18 } 19 20 .table thead{ 21 display:none; 22 } 23 24 .table tbody{ 25 position: relative; 26 } 27 28 .table tbody tr{ 29 margin-bottom:10px; 30 border-bottom:2px solid #ddd; 31 border-top:2px solid #ddd; 32 } 33 34 .table td{ 35 display:block; 36 text-align:left; 37 font-size:13px; 38 float:left; 39 border-top:0; 40 border-bottom:1px dotted #ccc; 41 width:100%; 42 } 43 44 .table tbody tr td:before { 45 content:attr(data-label); 46 float:left; 47 font-weight: bold; 48 } 49 </style> 50</head> 51<body> 52 <div class="container"> 53 <table class="table table-striped"> 54 <thead> 55 <tr><th>氏名</th><th>スコア</th><th>コメント</th><th>日時</th><th>A</th><th>B</th><th>C</th><th>D</th></tr> 56 </thead> 57 <tbody> 58 <tr> 59 <td data-label="名前：">〇〇〇〇</td> 60 <td data-label="スコア：">◯◯点</td> 61 <td data-label="コメント：">◯◯</td> 62 <td data-label="日時：">xxxx/xx/xx xx:xx</td> 63 <td data-label="A：">◯◯</td> 64 <td data-label="B：">◯◯</td> 65 <td data-label="C：">◯◯</td> 66 <td data-label="D：">◯◯</td> 67 </tr> 68 <tr> 69 <td data-label="名前：">〇〇〇〇</td> 70 <td data-label="スコア：">◯◯点</td> 71 <td data-label="コメント：">◯◯</td> 72 <td data-label="日時：">xxxx/xx/xx xx:xx</td> 73 <td data-label="A：">◯◯</td> 74 <td data-label="B：">◯◯</td> 75 <td data-label="C：">◯◯</td> 76 <td data-label="D：">◯◯</td> 77 </tr> 78 </tbody> 79 </table> 80 </div> 81</body> 82</html>
回答1件
0
ベストアンサー
tdだけをdisplay: blockにしてもその他のtrやtbodyなどはdisplay: table-rowなどを維持しようとします。
そのため、tableをdisplay: blockにしたい時にはこれらにも当ててあげる必要があります
css
1table, 2tbody, 3thead, 4tr, 5td { 6 display: block; 7}
投稿2017/11/15 05:09
総合スコア353
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/16 06:45
2017/11/16 07:16
2017/11/17 05:12