SSブログ

[Tips] IE10 で td に colspan や rowspan を使うとボーダーが表示されない問題 - The issue of invisible borders using colspan or rowspan to td in IE10 [Internet Explorer]

Internet Explorer 10 固有の問題です(追記:このエントリーを書いた時点の最新の IE は IE11 です)

It is a problem peculiar to Internet Explorer 10 (postscript: the latest IE when I wrote this entry is IE11). 

table 内の td タグで colspan や rowspan を使った場合、他の IE やブラウザーではきちんとボーダーが表示されるのに、IE10 でのみボーダーが期待通りに表示されないことがあります。

When you use colspan attr or rowspan attr in td tag, some borders may not be displayed as expected only in IE10, against the other IE versions.

開発者ツールを使って原因を調べようとすると、マウス オーバーした途端に再描画が走ってちゃんとボーダーが表示されたりするので、イラッとします。

If you use the F12 Developper Tool to check the cause of this issue, you will become nervous because the trouble does not happen as expected; the borders will be drawn as usual by unexpected being redrawn.

こういうシチュエーションで発生します。

It occurs in following situations.

<style type="text/css">
table {
    border-collapse: collapse;
}
td {
    border: 1px solid black;
}
</style>
<table>
    <tr>
        <td id="td1">・・・</td>
        <td id="td2">・・・</td>
        <td id="td3">・・・</td>
    </tr>
    <tr>
        <td id="td4" colspan="3">・・・</td>
    </tr>
</table>

このようなマークアップだと、よく上段の td2 と td3 の下のボーダーが表示されなくなります。

In such above markup, a border under td2 and also a border under td3 are not displayed.

また、同じ css を使うとして、以下のような場合でも発生します。 

In addition, same trouble occurs by the following markup too .

<table>
    <tr>
        <td id="td5" rowspan="3">・・・</td>
        <td id="td6">・・・</td>
    </tr>
    <tr>
        <td id="td7">・・・</td>
    </tr>
    <tr>
        <td id="td8">・・・</td>
    </tr>
</table>

このようなマークアップだと、よく右側の td7 の左のボーダーが表示されなくなります。

In such a markup, the left-side border of right td7 is not displayed.

対処法は地味ですが簡単で、大きいほうの td の(表示されない)ボーダーを描画しないようにします。 

The actions to be taken are time-consuming, but simple and  easy. You do not draw the border of the larger td.

<table>
    <tr>
        <td id="td1">・・・</td>
        <td id="td2">・・・</td>
        <td id="td3">・・・</td>
    </tr>
    <tr>
        <td id="td4" colspan="3" style="border-top: none;">・・・</td>
    </tr>
</table>
<table>
    <tr>
        <td id="td5" rowspan="3" style="border-right: none;">・・・</td>
        <td id="td6">・・・</td>
    </tr>
    <tr>
        <td id="td7">・・・</td>
    </tr>
    <tr>
        <td id="td8">・・・</td>
    </tr>
</table>

面倒ですが、他のブラウザーでの見た目も違和感がない状態で対応できます。

It is a troublesome method, but a problem does not occur by all browsers.


nice!(3)  コメント(4)  トラックバック(0) 
共通テーマ:パソコン・インターネット

nice! 3

コメント 4

One-for-you

過去10数年ですが、マークアップの、意味
エンジニアworldと違う意味と思ってしまいます

IEは、今の所上げましたが9で留めてます
、また、みみちゃんさんとこから、tier one
階層Userは、知識の、トリガを頂き消化して
みます

by One-for-you (2015-06-14 02:46) 

Cialis kaufen

沒有醫生的處方
cialis reviews http://kawanboni.com/ Tadalafil 5mg
by Cialis kaufen (2018-04-14 00:23) 

Rogerbiz

<a href="http://descchipick.7m.pl/news/161-nvidia-geforce-7025-draivera-skachat.html#">Nvidia geforce 7025 драйвера скачать</a> скачать драйвер pk 635m бесплатно <a href=http://neugardje.7m.pl/posts/15-avertv-a827a-draiver-skachat.html#>Avertv a827a драйвер скачать</a>
<a href="http://graphdatsfric.7m.pl/posts/41-livtec-lt901-proshivka-skachat.html#">Livtec lt901 прошивка скачать</a> сметно договорной отдел должностная инструкция <a href=http://budfepos.7m.pl/posts/13-skachat-igru-super-bomberman-na-kompyuter.html#>Скачать игру super bomberman на компьютер</a>
http://klawterni.7m.pl/news/26-draivera-dlja-printera-hp-p1005-skachat.html
а
by Rogerbiz (2018-09-04 16:05) 

Rogerbiz

<a href="http://subtsela.7m.pl/posts/170-skachat-knigu-bioshok.html#">Скачать книгу биошок</a> моды для world of warships скачать бесплатно <a href=http://neybreechfi.7m.pl/news/763-skachat-transport-na-garris-mod-10.html#>Скачать транспорт на гаррис мод 10</a>
<a href="http://viotater.7m.pl/articles/702-skachat-launcher-var-tander-tanki.html#">Скачать лаунчер вар тандер танки</a> книги владимир сазанов скачать <a href=http://protdesto.7m.pl/news/218-otlichie-proizvodstvennyh-instrukcii-ot-instrukcija.html#>Отличие производственных инструкций от инструкция</a>
http://exunbrow.7m.pl/posts/117-kak-skachat-igru-na-kompyuter-windows-8.html
а
by Rogerbiz (2018-09-05 07:03) 

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

この広告は180日新規投稿のないブログに表示されます