以下のソースはWindowsの各種ブラウザ(IEを除く)で見たときに『終了しました』という背景画像がtr
に対して中央に表示されるのですが、macのSafariおよびiPadOSのSafari・Chromeで見たときにth
td
の2箇所に対して中央表示されます。
ブレイクポイント以下でth
td
をdisplay:block
に変えると期待通りの表示になるので、おそらくdisplay:table-cell
が原因だと思うのですが、Safari等でも『終了しました』という画像をtr
に対して表示させるにはどうしたらいいでしょうか?
##正しく表示されない動作確認環境
- Windows10のIE11
- macOS10.15のSafari最新版(Chrome最新版では異常なし)
- iPadOS13.6のSafari最新版
##該当ソース
html
1<table class="scheduleTable"> 2 <tbody> 3 <tr class="scheduleTable__row--end"> 4 <th class="scheduleTable__head">日付</th> 5 <td class="scheduleTable__data"> 6 <dl class="scheduleList"> 7 <dt class="scheduleList__ttl">タイトル</dt> 8 <dd class="scheduleList__item">内容</dd> 9 <dd class="scheduleList__item">内容</dd> 10 <dd class="scheduleList__item">内容</dd> 11 <dd class="scheduleList__item">内容</dd> 12 </dl> 13 </td> 14 </tr> 15 <tr class="scheduleTable__row"> 16 <th class="scheduleTable__head">日付</th> 17 <td class="scheduleTable__data"> 18 <dl class="scheduleList"> 19 <dt class="scheduleList__ttl">タイトル</dt> 20 <dd class="scheduleList__item">内容</dd> 21 <dd class="scheduleList__item">内容</dd> 22 <dd class="scheduleList__item">内容</dd> 23 </dl> 24 </td> 25 </tr> 26 </tbody> 27</table>
scss
1*, *::before, *::after { 2 box-sizing: border-box; 3} 4html { 5 font-size: 62.5%; 6} 7body { 8 color: #444; 9 line-height: 1.6; 10 background-color: #eee; 11 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; 12 font-size: 1.6rem; 13} 14.scheduleTable { 15 width: 100%; 16 max-width: 1080px; 17 margin: 0 auto; 18 border-collapse: collapse; 19 border-spacing: 0; 20 border: none; 21} 22.scheduleTable__row--end { 23 background-image: url(http://placehold.jp/d42d6b/fff/250x50.png?text=終了しました); 24 background-position: center; 25 background-repeat: no-repeat; 26 opacity: 0.99; 27 background-color: #aaa; 28 .scheduleTable__head, 29 .scheduleTable__data { 30 z-index: -1; 31 opacity: .5; 32 background-image: none; 33 } 34} 35.scheduleTable__head { 36 width: 160px; 37 padding-left: 1em; 38 border: 1px solid #00a0e9; 39 border-right: none; 40 color: #2e3c96; 41 font-weight: bold; 42 font-size: 1.8rem; 43} 44.scheduleTable__data { 45 border: 1px solid #00a0e9; 46 border-left: none; 47 padding: 4px; 48} 49.scheduleList__ttl { 50 font-size: 1.8rem; 51 color: #00a0e9; 52 font-weight: bold; 53} 54 55 56@media screen and (max-width: 768px) { 57 .scheduleTable__head, 58 .scheduleTable__data { 59 border-bottom: none; 60 display: block; 61 width: 100%; 62 padding: 10px; 63 } 64 .scheduleTable__head { 65 border-right: 1px solid #00a0e9; 66 background-color: rgba(0, 160, 233, 0.1); 67 } 68 .scheduleTable__data:last-child { 69 border-left: 1px solid #00a0e9; 70 } 71 .scheduleTable__row:last-child .scheduleTable__data { 72 border-bottom: 1px solid #00a0e9; 73 } 74 .scheduleTable + .scheduleTable { 75 margin-top: 20px; 76 } 77}
回答1件
あなたの回答
tips
プレビュー