<table>の角丸デザインについてFirefoxのみ背景の挙動が違う

前提・実現したいこと

下記のソースコードにおいて、Chrome・Edge・IEでは、<tbody>の背景が、
角丸にした<td>の枠線の外側に表示されず理想通りの結果になっております。

一方でFirefoxの場合のみ<tbody>の背景が枠線の外側に残っており不格好になってしまいます。

こちらについて現在の<table>を利用するレイアウトを変えずに、解決する方法はないでしょうか。

該当のソースコード

html
1<table>
2<tbody style="background-color: #000;border: 2px solid #fff;border-radius: 10px;">
3<td>content</td>
4<td style="border: 2px solid #fff;border-radius: 10px;">radius-content</td>
5</tbody>
6</table>

行動規範の内容に同意します

回答2件

ベストアンサー

こちらについて現在の<table>を利用するレイアウトを変えずに、解決する方法はないでしょうか。

残念ながら、不可能です。以下のように、<td>の中に1つ<div>や<span>や<a>などを追加する形が、いまあるソースコードに一番近い形での実装にはなると思います。
borderではなく、box-shadowを使用している点はご注意ください。

HTML
1<table>
2  <tbody style="border: 2px solid #fff;border-radius: 10px;">
3    <td style="background-color: #000;">content</td>
4    <td><div style="background-color: #000; border-radius: 10px; box: 0 0 0 2px #fff;">radius-content</div></td>
5  </tbody>
6</table>

SVGを用いたり、<canvas>とJavaScriptを組み合わせたりするような方法もあるかもしれません。もしくはFirefoxを作っている「Mozilla Corporation」という会社にお願いしてみる..、というのもあり得るかもしれません。いずれにしても<td>のなかに<div>などを1つ追加するだけの方が楽だと思います。

kei344さんのご指摘の通りstyle=""ではなく、<style>...</style>に書いたり、CSSファイルに分けたりしたほうがいいので、そちらの書き方も書いておきます。

HTML
1<table>
2  <tbody>
3    <!-- trがないので追加 -->
4    <tr>
5      <td>content</td>
6      <td><div class="xxxx">radius-content</div></td>
7    </tr>
8  </tbody>
9</table>
10
11<!-- CSSファイルに記述すべきですが、せめてstyle要素に書いたほうがわかりやすいです。 -->
12<style>
13  /* tr td:nth-child(1) */
14  tr td:first-child {
15    background-color: #000;
16  }
17  /* tr td:nth-child(2) */
18  /* tr td:last-child > div */
19  .xxxx {
20    background-color: #000;
21    border-radius: 10px;
22    box: 0 0 0 2px #fff;
23  }
24</style>

投稿2020/05/21 00:09

編集2020/05/21 05:17

new1ro

総合スコア4528

style属性でなく、style要素にしたほうが記述は減ると思います。

HTML
1<table>
2<tbody style="border: 2px solid #fff;border-radius: 10px;">
3<td style="background-color: #000;">content</td>
4<td style="background-color: #000;border: 2px solid #fff;border-radius: 10px;">radius-content</td>
5</tbody>
6</table>

投稿2020/05/20 14:01

kei344

総合スコア69407

docodemodoor

2020/05/20 14:19 編集

ご回答ありがとうございます。ソースコードの簡略化のためにstyle属性で記載をしております。情報小出しにしてしまい申し訳ないですが、実際は下記のようなコードになっており linear-gradientを左と右で揃えたいため、<tbody>にbackgroundを設定しております <table> <tbody style="background: linear-gradient(to bottom, #ff0000 0%, #ff0000 30%, #0000ff 50%, #0000ff 100%);border: 2px solid #fff;border-radius: 10px;"> <tr> <td>content</td> <td rowspan="2" style="border: 2px solid #fff;border-radius: 10px;">radius-content</td></tr> <tr><td>f</td></tr> </tbody> </table> backgroundを<tbody>に設定した状態で、Firefoxの挙動を修正することはできないでしょうか・・・・。