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

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.

タグ：IE IE10 HTML TD ボーダー border colspan rowspan