none
テーブルタグ内で結合したセルの罫線が正しく描写されない RRS feed

  • 質問

  • IE11だと正常に描写されていた結合セルの罫線が、Edgeだと正しく描写されません。
    ※画像が投稿できないためお手数ですが、現象が確認できるキャプチャに関しては下記をご参照下さい。
    <https://answers.microsoft.com/ja-jp/microsoftedge/forum/msedge_other-msedge_win10/%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab%e3%82%bf/693dee67-05a5-4b53-a27e-5d67875932cd?messageId=244e9b67-1a2c-4d03-964f-2aeb20582193>

    現象が発生するHTMLファイルは下記に配置しました
    <https://www.dropbox.com/s/h26v1itmxuye0w5/CAS-85602-B3J5N0.html?dl=0>

    正常に描写するために必要なプロセスがありましたら

    ご教示の程よろしくお願い致します。

    Edgeバージョン 91.0.864.48 (公式ビルド) (64 ビット)

    2021年7月19日 2:51

回答

    • 下部の水平線が無いのは、<table id="FpSpread1_cht"> の高さが、親 div の高さを超えているためです。
      開発者ツールで Computed したところ、実際の高さが 99px あったため、今回は仮に、このテーブルの height を 100% から 100px へと変更したところ、下線部が表示されました。
    • tr の height 指定 が効いておらず、実際の tbody 部の高さは 98px ありました。実測値は下記の通りです。
      <tr style="height: 20px;"> 部の高さは 25px
      <tr style="height: 38px;"> 部の高さは 48.5px
      <tr style="height: 19px;"> 部の高さは 24.5px
    • 垂直線が一部残っている箇所があるのは、2~3 行目の tr 内の td で、border-right および border-left の罫線スタイル指定が不足して矛盾が生じているのが原因です。
    • border-collapse を collapse から separate に変更すると、問題箇所が分かりやすくなります。



    • 回答としてマーク tsfs 2021年7月19日 8:45
    • 編集済み 魔界の仮面弁士MVP 2021年7月19日 11:02 誤って「style="20px;"」表記になっていたため、「height:」を追加
    2021年7月19日 5:54
    • border-left の罫線スタイル指定が不足しているのが原因です。
    • border-collapse を collapse から separate に変更すると下記のようになります。

    隣接セルの境界線スタイルが矛盾した場合の動作までは調べていないため、border-collapse: collapse; のために、具体的にどのように修正すべきかまでは追跡調査していませんが、もしかしたら CSS 2.2 の仕様 にある "17.6.2.1 Border conflict resolution" の項がヒントになるかもしれません。

    • 回答としてマーク tsfs 2021年7月19日 8:44
    2021年7月19日 7:17

すべての返信

  • Chrome でも再現される現象であれば、問題自体はここではなく Chromium の Issue で同様の問題がないか探すか、新規に投稿されると良いでしょう。

    IE モードの利用以外の回避策が必要なのでしょうか?


    Hebikuzure aka Murachi Akira

    2021年7月19日 4:07
    モデレータ
  • > 現象が発生するHTMLファイルは下記に配置しました
    > https://www.dropbox.com/s/h26v1itmxuye0w5/CAS-85602-B3J5N0.html?dl=0

    そのコードの山のような css の何かが IE と Edge の描画の違いに影響を与えているのでしょうが、それを丸投げして何の問題か調べてくれと言うのは閲覧者・回答者の好意に期待しすぎだと思うのですが。

    問題を再現できる必要最低限のところまでコードをどんどん削除して何の影響か調べてみませんか? その過程で原因が分かって自己解決できるかもしれません。

    2021年7月19日 4:09
    • 下部の水平線が無いのは、<table id="FpSpread1_cht"> の高さが、親 div の高さを超えているためです。
      開発者ツールで Computed したところ、実際の高さが 99px あったため、今回は仮に、このテーブルの height を 100% から 100px へと変更したところ、下線部が表示されました。
    • tr の height 指定 が効いておらず、実際の tbody 部の高さは 98px ありました。実測値は下記の通りです。
      <tr style="height: 20px;"> 部の高さは 25px
      <tr style="height: 38px;"> 部の高さは 48.5px
      <tr style="height: 19px;"> 部の高さは 24.5px
    • 垂直線が一部残っている箇所があるのは、2~3 行目の tr 内の td で、border-right および border-left の罫線スタイル指定が不足して矛盾が生じているのが原因です。
    • border-collapse を collapse から separate に変更すると、問題箇所が分かりやすくなります。



    • 回答としてマーク tsfs 2021年7月19日 8:45
    • 編集済み 魔界の仮面弁士MVP 2021年7月19日 11:02 誤って「style="20px;"」表記になっていたため、「height:」を追加
    2021年7月19日 5:54
    • border-left の罫線スタイル指定が不足しているのが原因です。
    • border-collapse を collapse から separate に変更すると下記のようになります。

    隣接セルの境界線スタイルが矛盾した場合の動作までは調べていないため、border-collapse: collapse; のために、具体的にどのように修正すべきかまでは追跡調査していませんが、もしかしたら CSS 2.2 の仕様 にある "17.6.2.1 Border conflict resolution" の項がヒントになるかもしれません。

    • 回答としてマーク tsfs 2021年7月19日 8:44
    2021年7月19日 7:17
  • ご回答いただきありがとうございます。
    IEモードでの再読み込みはなるべく避けたいと考えています。
    Chromeでも同様の現象を確認したため
    ご教示いただきましたリンク先にて、同様の問題がないか調査したいと思います。
    2021年7月19日 8:35
  • ご回答いただきありがとうございます。
    申し訳ありません。あまりCSSに精通していないため、ソース全体を投稿しました。
    ご教示いただきました通り、本現象と関係ないコードがほとんどのため
    ソースを削って再度投稿を検討したいと思います。
    2021年7月19日 8:38
  • ご回答いただきありがとうございます。
    本現象の原因に関しまして、詳細迄ご説明いただき誠にありがとうございます。
    私の環境でも ご教示いただきましたオペレーションを試してみたところ、想定通りの動きをしました。
    • 回答としてマーク tsfs 2021年7月19日 8:44
    • 回答としてマークされていない tsfs 2021年7月19日 8:44
    2021年7月19日 8:43
  • ご回答いただきありがとうございます。
    先ほどは、詳細ご回答いただき誠にありがとうございます。
    ご教示いただきましたリンク先にて、どのように修正するかを検討したいと思います。

    2021年7月19日 8:44