Safariでtrタグに対するbackground-imageの仕様

Question

以下のソースは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最新版

##該当ソース

<table class="scheduleTable">
	<tbody>
		<tr class="scheduleTable__row--end">
			<th class="scheduleTable__head">日付</th>
			<td class="scheduleTable__data">
				<dl class="scheduleList">
					<dt class="scheduleList__ttl">タイトル</dt>
					<dd class="scheduleList__item">内容</dd>
					<dd class="scheduleList__item">内容</dd>
					<dd class="scheduleList__item">内容</dd>
					<dd class="scheduleList__item">内容</dd>
				</dl>
			</td>
		</tr>
		<tr class="scheduleTable__row">
			<th class="scheduleTable__head">日付</th>
			<td class="scheduleTable__data">
				<dl class="scheduleList">
					<dt class="scheduleList__ttl">タイトル</dt>
					<dd class="scheduleList__item">内容</dd>
					<dd class="scheduleList__item">内容</dd>
					<dd class="scheduleList__item">内容</dd>
				</dl>
			</td>
		</tr>
	</tbody>
</table>

*, *::before, *::after {
	box-sizing: border-box;
}
html {
	font-size: 62.5%;
}
body {
	color: #444;
	line-height: 1.6;
	background-color: #eee;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.6rem;
}
.scheduleTable {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	border-collapse: collapse;
	border-spacing: 0;
	border: none;
}
.scheduleTable__row--end {
	background-image: url(http://placehold.jp/d42d6b/fff/250x50.png?text=終了しました);
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.99;
	background-color: #aaa;
	.scheduleTable__head,
	.scheduleTable__data {
		z-index: -1;
		opacity: .5;
		background-image: none;
	}
}
.scheduleTable__head {
	width: 160px;
	padding-left: 1em;
	border: 1px solid #00a0e9;
	border-right: none;
	color: #2e3c96;
	font-weight: bold;
	font-size: 1.8rem;
}
.scheduleTable__data {
	border: 1px solid #00a0e9;
	border-left: none;
	padding: 4px;
}
.scheduleList__ttl {
	font-size: 1.8rem;
	color: #00a0e9;
	font-weight: bold;
}


@media screen and (max-width: 768px) {
	.scheduleTable__head,
	.scheduleTable__data {
		border-bottom: none;
		display: block;
		width: 100%;
		padding: 10px;
	}
	.scheduleTable__head {
		border-right: 1px solid #00a0e9;
		background-color: rgba(0, 160, 233, 0.1);
	}
	.scheduleTable__data:last-child {
		border-left: 1px solid #00a0e9;
	}
	.scheduleTable__row:last-child .scheduleTable__data {
		border-bottom: 1px solid #00a0e9;
	}
	.scheduleTable + .scheduleTable {
		margin-top: 20px;
	}
}

Comments

[yambejp]

OSの問題というよりブラウザの問題では？
ブラウザの種類とバージョンを追記ください

[yambejp]

mac/iOSでよいのですね？windowsは対象外ですか？

[nelpesica]

WindowsのChrome、Firefox、Edgeでは正常に表示されていますので大丈夫です。

[yambejp]

単純にmac/iOSのsafariで表示がおかしいということですか？
それならそういう仕様なのでは？

[nelpesica]

ですので、mac/iOSのsafariの解決（回避）方法を知りたいのです。

[yambejp]

.scheduleTable__row--end内の
.scheduleTable__head,
.scheduleTable__data {
のセクションを削除しても同様ですか？

[nelpesica]

セクションを削除するというのはth,td要素を削除するということでしょうか？

Answer 1

table-cellに問題があることがわかりましたので、見た目を維持したたまflexとblock要素にすることで問題を回避することができました。
以下、追加ソースです。

.seminarScheduleTable__row {
	display: flex;
	@media screen and (max-width: 768px) {
		flex-direction: column;
	}
	&--end {
		@extend .seminarScheduleTable__row;
	}
}
.seminarScheduleTable__head {
	display: block;
	flex: 0 1 auto;
}
.seminarScheduleTable__data {
	display: block;
	flex: 1 1 auto;
}