最上行の「セル結合」と「セル幅の指定機能」

「セル結合」の機能は順調に仕上がりましたが、懸念していた「セル幅の指定機能」との相性は良くありません。

 

HTMLの「table要素」に「table-layout: fixed」を設定すると、最初の行のセル幅の指定で、列幅を任意に調節できる様になります。(2行目以降の幅指定は無効です) 

「セル幅の指定機能」はこの仕様に準じて、最上行のセルに「width値のstyle属性」を設定します。

 

一方、「セル結合」は結合開始セルの幅を、被結合セルを含む幅まで拡げ、被結合セルを非表示にします。 セル結合を最上行以外で行う場合は列幅に影響しませんが、最上行で行った場合は、それまで指定していた列幅が結合した範囲で均等になります。

 

更に、これまで「セル幅の指定機能」で培って来た「指定した通りにセル(列)幅を調節できる環境」は、無効になってしまいます。 原因は、非表示の被結合セルが、最上行に出来るからの様で、列幅の思い通りの調節は出来なくなります。

 

 

実際の様子 

下は、「Fix」モードで最上行の全てのセル幅を指定したサンプルです。

 

 

 

「セルB」~「セルD」をセル結合します。

 

 

 

「セルC」「セルD」は非表示になります。 この時、2行目以降を見ると、セル結合した列幅が均等になった事が判ります。

 

 

 

これを再調節しようと「セル幅の設定パネル」を開くと、被結合セルが非表示なったので、下の様に表の幅全体が激変します。

 

 

 

どうやら、「セルA」「セルB」は結合前の指定幅を保っていますが、非表示の「セルC」「セルD」は非表示のまま「セルB」の1/3の幅になった様です。

 

この後、一番最初の列幅に戻そうとしても上手く出来ません。 もはや「Fix」モードの意味がない状態です。

 

 

 

「セル結合」と「セル幅の指定機能」の融合 

最上行のセル結合をした「表」デザインは、しごく一般的です。「セル幅の指定機能」による正確な列幅調節が、セル幅を結合すると使えないのは残念です。

 

この問題は、最上行をセル内容が無い「ゴーストセル」にして列幅の調節のためにだけ使い、実際は2行目からを表示するレイアウトで改善できそうです。 

 

このコードは現在推敲中ですが、生成する「表」の仕様が再び変ります。 やはり、可能な限り「下位互換性」を保つ必要があり、その処理が問われます。