テーブル列の最小幅を偽造する

古き良き <table> タグは、表形式のデータを表示するための最もセマンティックな HTML です。 しかし、表の表示方法を制御するのは非常に難しいと思います。特に、各表のセルにどれだけのコンテンツが入っているかわからない動的な環境では、列の幅を制御するのは非常に困難です。 場合によっては、XNUMX つの列が非常に広く、他の列が縮んでいることがあります。 それ以外の場合は、等幅になりますが、より多くのコンテンツが含まれ、より多くのスペースが必要な列が犠牲になります。

しかし、物事を少し簡単にするのに役立つ CSS トリックのような回避策を見つけました。 それが、この投稿でお見せしたいものです。

問題

まず、ブラウザがレイアウトをどのように処理するかを理解する必要があります。 私たちは持っています table-layout CSS のプロパティを使用して、表が各表の列の幅をどのように配分するかを定義します。 次の XNUMX つの値のいずれかを取ります。

• auto （デフォルト）
• fixed

列の幅を定義せずにテーブルから始めましょう。 言い換えれば、適用することで各列にどのくらいの幅を与えるかをブラウザーに決定させます。 table-layout: auto CSSでそれを。 お気づきのように、ブラウザーは、使用可能な全幅を各列間で分割するために必要なアルゴリズムで最善を尽くします。

自動テーブルレイアウトを table-layout: fixedの場合、ブラウザーは使用可能なスペース全体を列の総数で割り、その値を各列の幅として適用します。

しかし、列の幅を制御したい場合はどうすればよいでしょうか? 私たちは持っています <colgroup> 助ける要素！ 個人で構成されています <col> 各列に必要な正確な幅を指定するために使用できる要素。 それがどのように機能するか見てみましょう table-layout: auto:

説明のためにスタイルをインライン化しました。

ブラウザはインライン幅を考慮していません。これは、合計すると使用可能なテーブル スペースの量を超えるためです。 その結果、すべての列が表示されるように、テーブルは列からスペースを奪います。 これは完全に問題のないデフォルトの動作です。

どのように <colgroup> と連携 table-layout: fixed. 確認してみましょう：

これはまったく良く見えません。 残りの列の固定幅を維持しながら、少し曲げるために、多数のコンテンツを含む列が必要です。 固定 table-layout value は幅を尊重しますが、最もスペースを必要とする列のスペースを食い尽くすほどです...これは私たちにとってはありません。

を設定できれば、これは簡単に解決できます。 min-width の代わりに列に width. そうすれば、列は「この最小値に達するまで、幅の一部を提供できます。」と表示されます。その後、テーブルは単純にコンテナをオーバーフローさせ、ユーザーに水平スクロールを与えて、テーブルの残りの部分を表示します。 しかし残念ながら、 min-width テーブルの列は、 <col> 要素。

ソリューション

解決策は、偽造することです min-width そのためには少しクリエイティブになる必要があります。

空を追加できます <col> 私たちのXNUMX番目の列として <colgroup> HTML で、 colspan 最初の列の属性を変更して、最初の列が両方の列のスペースを占有するようにします。

<table> <colgroup> <col class="col-200" /> <col /> <col class="col-input" /> <col class="col-date" /> <col class="col-edit" /> </colgroup> <thead> <tr> <th colspan="2">Project name</th> <th>Amount</th> <th>Date</th> <th>Edit</th> </tr> </thead> <!-- etc. -->
</table>

前の例のインライン スタイルの代わりにクラスを追加したことに注意してください。 同じ考え方が引き続き適用されます。各列に幅を適用しています。

トリックは、最初の <col> そして空の秒 <col>. 最初に幅を適用すると <col> （それは 200px 上記のスニペットで)、XNUMX 番目の列は、固定されたテーブル レイアウトが使用可能なスペースを分割して列に分配するときに使い果たされます。 しかし、最初の列の幅 (200px) が尊重され、そのまま維持されます。

ほら！ 私たちは偽物を持っています min-width テーブルセルにセット。 使用可能なスペースが変化すると、最初のセルが変化し、テーブルが水平スクロールのためにオーバーフローします。

(ちょっと加筆しました スティッキーポジショニング そこの最初の列に。)

ユーザー補助

ここでアクセシビリティを完全に忘れないようにしましょう。 Windows の NVDA と macOS の VoiceOver でテーブルを実行したところ、XNUMX つの列しか使用していないにもかかわらず、XNUMX つの列すべてがアナウンスされていることがわかりました。 そして、最初の列がフォーカスされると、「列 XNUMX ～ XNUMX」とアナウンスされます。 完全にエレガントではありませんが、誰かが迷子になることもありません。 私たちは投げることができると思います aria-hidden 未使用の列の属性ですが、ARIA が貧弱な HTML の代わりにならないことも知っています。

---

私は認めます、これは少しハッキーに感じます。 しかし、それはうまくいきます！ コメントで別のアプローチがある場合はお知らせください...または、この「ハッキング」がユーザーにもたらす可能性のある混乱について知っている.

• SEO を活用したコンテンツと PR 配信。 今日増幅されます。
• Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
• 情報源： https://css-tricks.com/faking-min-width-on-a-table-column/