テーブル列に最小幅を偽造します

標準のhtml<table>タグは、表形式データには意味的にサウンドになりますが、特にさまざまなセル含有量を持つ動的環境で、列幅を制御する際の課題を提示します。 矛盾が発生します：一部の列は過度に伸び、他の列は圧縮されるか、等しい幅が強制され、コンテンツが豊富な列に必要なスペースが犠牲になります。 この記事では、この問題に対処するためにCSSの回避策について詳しく説明しています。 課題：ブラウザのレイアウトと列幅<h3> </h3>ブラウザテーブルレイアウト<p>cssプロパティにヒンジがあり、<code>table-layout（デフォルト）またはauto値を受け入れます。fixed

を使用すると、ブラウザは列全体で使用可能な幅をアルゴリズム的に配布します。 table-layout: auto、逆に、利用可能なスペースを列間で均等に分割します table-layout: fixedネストされた

要素を備えた

要素により、列の幅を指定できますが、制限が発生します。 <colgroup></colgroup>では、利用可能な幅を超えると、ブラウザが列を圧縮します。 コンテンツに関係なく、指定された幅をrigidly Enforcedsを使用すると、より広い列でデータが切り捨てられる可能性があります。 <col>理想的には、table-layout: auto要素のtable-layout: fixedプロパティはソリューションを提供し、最小値を超えて展開しますが、その下の縮小はしません。 ただし、これはサポートされていません。

回避策：シミュレーションmin-width<col>

ソリューションには、

動作を創造的にシミュレートすることが含まれます。 これには、空のmin-width要素を追加し、

属性を使用することが含まれます。 このHTML構造を考慮してください：

min-width <col>CSSスタイル（元の例からインラインスタイルを置き換える）は、各colspanに適用されます。 キーは、最初の

（指定された幅、たとえば200px）とその後の空の

との関係にあります。

を使用すると、空の列のスペースが吸収されますが、最初の列の幅は固定されたままで、効果的に最小幅を作成します。 最初の列は必要に応じて曲がり、水平スクロールはオーバーフローに対応します。 （スティッキーポジショニングは、最初の列の動作を強化する可能性があります。）

<col> <col> <col> <col> <col>

Project name		Amount	Date	Edit

アクセシビリティの考慮事項<col> <col>アクセシビリティテスト（NVDAとナレーションを使用）は、すべての列が空の列でさえ発表されていることを明らかにしています。 完全にエレガントではありませんが（最初の列は2つを含むものとして発表されます）、ナビゲーションを妨げません。 空の列の<col>属性はこれを改善するかもしれませんが、ARIAがHTML構造の不良を補償しないでください。この回避策は、「ハック」と思われるように見えますが、機能的なソリューションを提供します。 代替アプローチと潜在的なユーザーエクスペリエンスへの影響は、歓迎すべき議論のポイントです。

以上がテーブル列に最小幅を偽造しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。