WEBTODESIGN

FireFoxでtableが崩れる

FireFoxでだけ、tableの表示が崩れたのでメモ。
tdの中のdivが、tdの高さに広がってくれません。

rowspanの使用

rowspanで結合したセルの高さが、1行分の高さになってしまってました。
tdの中のdivの高さが広がりません。height: 100%;を指定していても関係ないようでした。

FireFoxではセルの高さを明示する必要があるようです。

JavaScriptで高さを明示

セルの高さは内容によって変わるため、CSSで明示するのは難しいです。
（できるならそれが良さそう。）

tdの高さは想定したものだったので、JavaScriptでheightを動的に明示することにしました。

下記は汎用的な例です。（tdはどこのtdなのか明示した方が良いかと◎）

const tableEvent = () => {
    const tds = document.querySelectorAll('td');
    tds.forEach( td => {
        const height = td.clientHeight;
        td.style.height = height + 'px';
    });
}
window.addEventListener('load', () => tableEvent());
window.addEventListener('resize', () => tableEvent());

ロード時とリサイズ時に、tdの高さを明示します。

これで、無事に崩れが解消されました◎

RECOMMENDATION

NEWEST