如何在不同內容大小的表格儲存格中實現最佳內容配對？

以最佳內容適合截斷表格單元格

當遇到內容大小不同的表格單元格時，均勻顯示它們就成為一個挑戰不影響可讀性。 Fred 的表就是這個問題的一個例子。為了解決單元格寬度不均勻的問題，Fred 實現了 CSS 屬性，如空白：nowrap 和 table-layout：fixed，強制單元格溢出而不是影響其相鄰的單元格。

但是，這個方法僅部分解決了 Fred 的問題。右側單元格 Celldito 通常會留下空白，而左側單元格仍被截斷。為了修正這個問題，Fred 尋求一種均勻分佈單元格寬度的解決方案，利用 Celldito 中的任何可用空白來優化左側單元格的內容可見性。

實現 Fred 所需結果的有效技術包括操作表格的列組 (

) 並對單元格套用附加樣式。以下的實現確保：

• 單元格具有固定高度（100% 寬度），不會影響其直接鄰居。
• 單元格具有輔助列（寬度：0%） ，用作隱藏佔位符，防止第一列縮小到零寬度。
• 左側單元格的溢位被隱藏，並使用省略號截斷其內容，從而允許右側單元格使用任何可用的空白。

程式碼片段：

<code class="html">&lt;table border=&quot;1&quot; style=&quot;width: 100%;&quot;&gt;
    &lt;colgroup&gt;
        &lt;col width=&quot;100%&quot; /&gt;
        &lt;col width=&quot;0%&quot; /&gt;
    &lt;/colgroup&gt;
    &lt;tr&gt;
        &lt;td style=&quot;white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;&quot;&gt;
            This cell has more content...
        &lt;/td&gt;
        &lt;td style=&quot;white-space: nowrap;&quot;&gt;Less content here.&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;</code>

這種基於CSS 的方法為Fred 提供了所需的結果，優化了兩個單元格中內容的可見性，同時防止單元格寬度不均勻。

以上是如何在不同內容大小的表格儲存格中實現最佳內容配對？的詳細內容。更多資訊請關注PHP中文網其他相關文章！