首頁 > web前端 > css教學 > 如何在不同內容大小的表格儲存格中實現最佳內容配對?

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

Patricia Arquette
發布: 2024-10-28 12:25:02
原創
935 人瀏覽過

How to Achieve Optimal Content Fit in Table Cells with Varying Content Sizes?

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

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

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

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

) 並對單元格套用附加樣式。以下的實現確保:
  • 單元格具有固定高度(100% 寬度),不會影響其直接鄰居。
  • 單元格具有輔助列(寬度:0%) ,用作隱藏佔位符,防止第一列縮小到零寬度。
  • 左側單元格的溢位被隱藏,並使用省略號截斷其內容,從而允許右側單元格使用任何可用的空白。

程式碼片段:

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

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

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板