TABLEの上部に線が引かれない場合の姑息な対処法

HTML CSS

HTMLで表組みをしていると、列の幅を指定したくなることがあるんだけど、
見出し行が複数に構造化されている場合、うまく指定できなくなったりする。

たとえば、こんな感じの表組みをしたい場合、

単純見出し 連結見出し 構造化見出しラベル 単純見出し 単純見出し
構造化見出し 構造化見出し
データ１−１データ１−２データ１−３データ１−４データ１−５データ１−６データ１−７
データ２−１データ２−２データ２−３データ２−４データ２−５データ２−６データ２−７
見出しの各要素に幅のサイズを指定するとうまくいかないことから、
見出しの行の前に、さらに、幅を指定するだけの、カラムまたぎの無い行を作って、
その行自体はvisibility:collapseで表示しないようにする。

<TABLE style="table-layout:fixed;">
    <TR style="visibility:collapse;">
        <TH style="width:180px;"></TH>
        <TH style="width:120px;"></TH>
        <TH style="width:95px;"></TH>
        <TH style="width:160px;"></TH>
        <TH style="width:160px;"></TH>
        <TH style="width:35px;"></TH>
        <TH style="width:90px;"></TH>
    </TR>
    <TR>
        <TH rowspan="2">単純見出し</TH>
        <TH rowspan="2" colspan="2">連結見出し</TH>
        <TH colspan="2">構造化見出しラベル</TH>
        <TH rowspan="2">単純見出し</TH>
        <TH rowspan="2">単純見出し</TH>
    </TR>
    <TR>
        <TH>構造化見出し</TH>
        <TH>構造化見出し</TH>
    </TR>

…

</TABLE>

IE8くらいまでだと特にこれで問題なかったし、
hatena上だと（互換表示設定のためか‥）、今現に問題は無いのだが、
IE10やIE11になって、表の上部の線が表示されない現象に出くわした。非常に汚い。

ちなみに、同じように表示させない方法として、visibility:hiddenを使う方法も
紹介されているが、それでは白紙行が表示されてしまう。
それを消そうとして、display:none などを足せば、今度は、幅のサイズ指定が効かなくなってしまう。
collapseは使わざるを得ない。

上部の線を出そうと、いろいろ試行錯誤したものの、もっとも安直な解決法が見つかったので、
次に紹介する。何のことは無い。collapseの次に空行を足すだけでよかった。

<TABLE style="table-layout:fixed;">
    <TR style="visibility:collapse;">
        <TH style="width:180px;"></TH>
        <TH style="width:120px;"></TH>
        <TH style="width:95px;"></TH>
        <TH style="width:160px;"></TH>
        <TH style="width:160px;"></TH>
        <TH style="width:35px;"></TH>
        <TH style="width:90px;"></TH>
    </TR><tr></tr>
‥

長年の疑問が氷解して今晩はぐっすり眠れる。


ちなみに、TABLEにはclass指定でborder-collapse:collapse;が指定されている。
（多分、この性質がこの問題に最も影響したのだろう）
その他、THにはborder:1px solid #666666;がTDにはborder:1px dotted #0f0f0f;同様の指定されている。

デモページ