在表列上偽造最小寬度

>標準HTML<table>標籤，而在語義上進行表格數據的聲音在控制色譜柱寬度方面提出了挑戰，尤其是在具有不同單元格內容的動態環境中。 出現不一致之處：有些列可能會過度伸展，有些列被強制執行或相等的寬度，為富含內容的列犧牲了必要的空間。 本文詳細詳細介紹了CSS解決此問題的解決方案。 挑戰：瀏覽器佈局和列寬度<h3> </h3>>瀏覽器表佈局在<p>> css屬性上取決於<code>table-layout>（默認）或auto value。 fixed>使用

>，瀏覽器算法會在各列之間分佈可用的寬度。

，相反，將可用的空間平均分配給列。 table-layout: auto> table-layout: fixed>帶有嵌套

元素的

元素允許指定列寬度，限制出現。 使用<colgroup></colgroup>，超過可用寬度會導致瀏覽器壓縮列適合。 無論內容如何 <col>>理想情況下，table-layout: auto元素的Atable-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和VoiceOver）揭示了所有列均已宣布，甚至是空的。 雖然不是完美的優雅（第一列被宣佈為兩個），但並不會阻礙導航。 雖然空列上的<col>屬性可能會改善這一點，但要記住ARIA不應彌補較差的HTML結構至關重要。

這個解決方法，雖然似乎是“黑客”，但提供了一個功能解決方案。 替代方法和潛在的用戶體驗含義是歡迎討論點。

以上是在表列上偽造最小寬度的詳細內容。更多資訊請關注PHP中文網其他相關文章！