セル幅の調節について掘り下げる
「セル幅の指定機能」を追加したのですが、色々とテストすると完成度が低く思え、「table要素」の幅指定の際に生じる事象を、いちから見直しました。
ネットを調べると、幅調節の際の「table」のふるまいを調べて纏めている記事が幾つかあります。 やはり「セル幅（列幅）の計算仕様」は判り難いのです。
ここでは、「Blog Table ⭐」で表の列幅を調節するために特化して掘り下げます。「Blog Table ⭐」は、「table要素」の幅を最初に決めて生成し、それを必要な形に纏める仕様です。 全幅が定まらない「table要素」を生成して始める仕様は不可能ではないでしょうが、ブログ掲載には全幅を先に指定した方が扱い易いと思います。
ここで、「table要素」に「width」の指定が有るか無いかで、列幅のレイアウト時の振舞いが大きく違います。 振舞いを決定するのは以下の指定です。
◎「table要素」に指定された「width」（表の全体幅）の指定の有無
◎「table要素」に指定された「table-layout: auto」「table-layout: fixed」
◎ 列上のセルの内容要素の「width値」、またはセルに指定された「width値」の中で最大の値
◎「width」指定がないセルばかりの列が、有るか無いか
「Blog Table ⭐」は、「width」指定有り、「table-layout: auto」で表を生成しますが、「列幅」の調節時は「table-layout: fixed」が必須の仕様にしました。 これは「auto」は自動的な比例配分が機能し、セル幅が指定した幅とは異なり、扱い難くなるからです。
そこからが本題の「掘り下げ」です。 以下は、「fixed」指定の「table要素」の個々のセルに、「幅指定」を行った際の表全体の挙動を調べたものです。
以下の表記で「table要素」の「width」と「table幅」が出て来ますが、以下の意味で使い分けています。
▪「width」は「table要素」にインラインで指定される「style="width: ～px"」の指定値です。
▪「table幅」は「table要素」がレンダリングされてページ上に表示される幅です。
これは「table要素」の「表」が、指定くた幅と実際の表示値が一致しない場合があるからです。
全てのセルに幅の指定がある場合
全てのセルにセル幅の指定があり、その1個のセルの幅を調節した場合の挙動です。
縮小する方向の変更
全セルの指定値の和が「width」より小さくなろうとすると、他のセル幅は指定値より少しずつ大きくなる事で、調節したセルの減少分を補います。
下はその様子で、最初は全セルの指定値の和は「width=table幅」と一致していて、「セルB」を縮小すると、他の「セルA」「セルC」「セルD」が拡大します。
（注1）各セル幅は、その指定値で「width=table幅」を比例分配した幅になります。 指定されたセル幅と実際のセル幅とが一致せず、これが扱い難さの大きな要因になります。
「table幅」は全セルの指定値の和に常に一致します。 各セルは指定されたとおりのセル幅になります。
下は、最初は全セルの指定値の和は「table幅」と一致しています。 「セルA」「セルC」「セルD」の幅は指定通りの幅で不変、「セルB」を縮小すると「table幅」がそれに合わせて縮小します。
拡大する方向の変更
全セルの指定値の和が「width」より大きくなる場合は、各セルは指定された通りの幅で、「table幅」は指定された「width」を無視して拡大します。
下はその様子で、最初は全セルの指定値の和は「width=table幅」と一致していて、「セルB」を拡大すると、「table幅」が無制限に拡大します。
（注2）実際の「table幅」は指定された「width」と一致しなくなります。
この場合の挙動は、「width」の指定がある場合と全く同じです。
一部のセルに幅指定がない場合
一部のセルにセル幅の指定が無い場合に、他の1個のセルの幅を調節した場合の挙動です。 この場合、幅指定が無いセルは「width=table幅」の変化を吸収する様な挙動をします。
縮小する方向の変更
幅指定のあるセルは指定幅を維持し、「width」から指定されたセル幅の合計を引いた残りが、指定の無いセルの幅に割り当てられます。
下は、「セルB」が縮小するのに従い、幅指定のない「セルC」「セルD」が等幅で拡大して行きます。 その結果として「width=table幅」が維持されます。
幅指定のあるセルは指定幅を維持し、幅指定のないセルは、その内容の文字列の幅に従った幅になります。「table幅」はそれら全てのセル幅の和となります。
下はその様子で、「セルB」を縮小するに従って「table幅」が縮小しています。
拡大する方向の変更
最初は幅指定の無いセルがあるので、「width=table幅」が維持されます。
「セルB」の拡大に従って、幅指定の無い「セルC」「セルD」の幅は縮小し、最後は「幅0」になり、内容の文字列がはみ出します。
更に「セルB」を拡大すると、指定したセルの幅の合計が「width」を超え、「table幅」は指定された「width」を無視して無制限に拡大します。
（注3）実際の「table幅」は指定された「width」と一致しなくなります。
幅指定のあるセルは指定幅を維持し、幅指定のないセルは、その内容の文字列の幅に従った幅になります。「table幅」はそれら全てのセル幅の和となります。
下はその様子で、基本的に「table幅」は無制限に拡大します。
扱い易いインターフェイス
前項の調査を踏まえて、セル幅の調節機能のインターフェイスを、判り易く意のままに調節が出来る様に仕上げる必要があります。
前ページの「ver.3.1」では、一番扱い難い「注1」の状態を避けるために、最低1個は幅を指定しないセルを残し、他のセルで幅調節をする方法を提唱しています。 これはひとつの要領ですが、幅指定をしないセルは、指定のあるセルから従属的に幅を決定され、時には扱い難さに繋がるでしょう。
一方、「注2」「注3」の場合は、「table要素」の「width」指定と、実際の「table幅」が一致しなくなります。 これは扱い難さの原因になります。 例えば、セル幅の指定を削除したとたんに大きくセル幅が変わる様な挙動です。 この「指定幅」と実際の幅が食い違いを吸収する機能が必要と感じています。
下は、「table要素」の「width」指定が「460px」の時に、全てのセルにセル幅を指定し、実際の「table幅」が指定より拡大して「494px」になった所です。
下は調節後に元のパネルに戻った所ですが、パネルの「width」指定は「460px」のままです。
確かに、この表のHtmlの指定は「460px」のままですから、別操作で「表更新」を行っても、問題は生じません。 ただ、この表の「Fix」を「Auto」にして「表更新」を行うと、表のレイアウトが崩れます。「Auto」はセル幅の指定で「460px」を比例配分するので、全てのセル幅が少し狭くなるからです。
これは、表幅の設定を「494px」にすれば、「Auto」でも「Fix」でも同じ幅配分になり、全く問題がなくなります。 実際と設定が異なるとユーザーが判らなくなる原因にもなります。 これは改善する予定です。
しかし、これまでのインターフェイスは「table幅」を維持する傾向が強く、それが扱い難さになっているかも知れません。 セル幅の調節機能に入ったら、先ず全てのセルに「セル幅」を指定して、「width=table幅」を常にセル幅の合計値に合わせる様にすれば、エクセル様のシンプルな列幅設定が可能かも知れません。 あるいは、「table-layout: fixed」を指定したら「width」の指定なしで使う方法も...？
これも、今後の課題です。