###概要
現在bootstrapを使用してコーポレートサイトのレスポンシブ化をしていますが、
safariの時のみ表のtdが「width="100%"」にならず困っています;;
どなたか助けていただけますでしょうか?>_<
###発生している問題
PCサイズ時は問題ありません。
レスポンシブでsafari(もしくはios)時のみスマホサイズ~タブレットサイズ時(width:~768px)に
表のth,tdが「width="100%"」になりません。
文字が少ないと空いてしまいます。
###発生している問題のスクリーンショット
###ファイル構成と該当のソースコードについて
サイトはwordpressとbootstrapを使用して作成しています。
表はbootstrapの記述を使わずに、htmlで書いています。
html
1<div class="main_con"> 2 <table> 3 <tr> 4 <th>創立年月日</th> 5 <td>平成9年 (1997年)7月15日</td> 6 </tr> 7 <tr> 8 <th>資本金</th> 9 <td>1000万円</td> 10 </tr> 11 </table> 12</div>
使ったcssは「bootstrap.min.css」と下記のcssになります。
lang
1//こちらは自分で書いたcssです。 2 3/*table 4------------------------------------------------*/ 5.main_con table { 6 width: 100%; 7 border-top: #ccc 1px solid; 8 border-left: #ccc 1px solid; 9 margin-bottom: 20px; 10 border-collapse: collapse; 11 table-layout: fixed; 12 word-wrap: break-word; 13} 14.main_con table th { 15 background-color: #eeeeee; 16 width: 30%; 17} 18.main_con table td { 19 width: 70%; 20 white-space: normal; 21} 22.main_con table th, .main_con table td { 23 border-bottom: #ccc 1px solid; 24 border-right: #ccc 1px solid; 25 padding: 15px; 26 text-align: left; 27 vertical-align: middle; 28 line-height: 1.5; 29} 30 31.table_caution { 32 color: #244673; 33 font-size: 0.85rem !important; 34} 35@media screen and (max-width: 768px) { 36.main_con table { 37 font-size: 0.825rem; 38 width: 100%; 39 margin: 0 auto 20px; 40} 41.main_con table tbody, 42.main_con table tr, 43.main_con table th, 44.main_con table td{ 45 display:block; 46 width: 100%; 47} 48.main_con table td{ 49 width: 100%; 50 display:block; 51} 52.main_con table th { 53 border-top: none; 54 border-bottom: none; 55} 56}
lang
1//こちらは使用したリセットcssです。 2 3@charset "utf-8"; 4 5/* ----------------------------------------------------------------------- 6reset 7------------------------------------------------------------------------- */ 8 9html, body, div, span, object, iframe, 10h1, h2, h3, h4, h5, h6, p, blockquote, pre, 11abbr, address, cite, code, 12del, dfn, em, img, ins, kbd, q, samp, 13small, strong, sub, sup, var, 14b, i, 15dl, dt, dd, ol, ul, li, 16fieldset, form, label, legend, 17table, caption, tbody, tfoot, thead, tr, th, td, 18article, aside, canvas, details, figcaption, figure, 19footer, header, hgroup, menu, nav, section, summary, 20time, mark, audio, video { 21 margin:0; 22 padding:0; 23 border:0; 24 outline:0; 25 font-size:100%; 26 vertical-align:baseline; 27 background:transparent; 28} 29 30body { 31 line-height:1; 32} 33 34article,aside,details,figcaption,figure, 35footer,header,hgroup,menu,nav,section { 36 display:block; 37} 38 39nav ul, 40li { 41 list-style:none; 42} 43 44blockquote, q { 45 quotes:none; 46} 47 48blockquote:before, blockquote:after, 49q:before, q:after { 50 content:''; 51 content:none; 52} 53 54a { 55 margin:0; 56 padding:0; 57 font-size:100%; 58 vertical-align:baseline; 59 background:transparent; 60} 61
###自力で試した・調べたこと
■safariでthにdisplay:blockは効かないのか?
→bootstrapを使用していない他のサイトを参考に見てみましたら普通に見れましたので、
bootstrapが問題かもしれない?
■cssでtableタグに「display:block」を追加
→thが100%表示になりましたが、tdは直らず…。
■固定幅にしないとだめかと思い、tableに「table-layout: fixed;」を追加
→効いているのかわからず。
■固定幅(px幅指定)にしたらどうなるか
→効きましたが一番小さいサイズに合わせているため、大きめのサイズ画面で見た際見づらい
###補足情報(言語/FW/ツール等のバージョンなど)
■使用言語・ツール:php/html5/css3/js/wordpress/bootstrap
■コーディング:dreamweaver
■使用FTP:filezilla
■確認ブラウザ:chrome/safari/firefox/ie
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/01 13:23
2017/05/01 13:51
退会済みユーザー
2017/05/01 22:03
2017/05/04 02:05
退会済みユーザー
2017/05/04 03:35