表作成ツール「Blog Table ⭐」2重枠線の修正 / JavaScript

2重枠線の表示コードの修正

2重枠線は余り見かけなくなりましたが、HTMLの「table要素」にはおそらく最初から、このデザインは備わっていたと思います。 2重枠線の枠線を重ねたものがシンプルな枠線という形でデザインを指定する決まりです。「ver.4.0」以降の「Blog Table ⭐」では、「table要素」に付帯した「styleタグ」を通じて、2重枠線のデザインを表に適用しています。

下は、「Blog Table ⭐」で生成したその例です。

実は良く見ると、上辺・下辺は他の場所の枠線より幅があります。これは、列幅のコントロールのために隠している「thead要素」があるので、上部間隔が下部間隔の2倍になるため、下側の「tbody要素」をずらして表示した結果です。

少し苦しい方法ですが、これ以外に上手い方法がありません。「ver.5.2」以前は、この表示に「transform: translateY(～px)」というプロパティを使っていました。

下は「ver.5.2」の「Blog Table ⭐」で、枠線「-1px」を指定した表です。

枠線幅（この場合は間隔）が奇数の場合、上下の中間に移動するために「-0.5px」といった端数が生じ、「transform」の表示は横方向の枠線に少しボケが出ます。枠線間隔「1px」の指定で、計算上は「上1.5px・下1.5px」の表示です。

次は「ver.5.3」による、上と同じ枠線「-1px」を指定した表です。

「ver.5.3」は「position: relative; top: ～px」を使用し、枠線幅が奇数の場合は端数を切り捨てたズラしを行い、計算上は「上2px・下1px」の間隔になります。

「position: relative」による移動で「top: -0.5」といった端数の指定は、枠線の暈けは生じませんが、行によってセルの高さが異なる不揃いが生じます。それを嫌い、奇数の場合は切り捨て計算にしています。

その場合は上辺・下辺の枠線間隔 1pxの差が出るので、「padding-bottom: 1px」を「table要素」に指定して補正をしています。上の表の場合は、この補正で「上2px・下2px」の枠線間隔です。

この枠線幅の調整をするコードは、以下にあります。「美しい表」がポリシーなので、2重枠線の対応は色々と苦心をしています。

「Blog Table ⭐」 ver.5.3　1828行～

let css_bottom;
if(border_space%2==0){
    css_bottom=''; }
else{
    css_bottom='padding-bottom: 1px; '; }

let css_tbody;
if(border_space>1){
    let gap=Math.floor(border_space/2);
    css_tbody='#'+ t_id + ' tbody { background-color: '+ cell_back.value +'; '+
        'position: relative; top: -'+ gap +'px; } '; }
else{
    css_tbody='#'+ t_id + ' tbody { background-color: '+ cell_back.value +'; } '; }