如何均勻截斷表格儲存格而不隱藏重要內容？-css教學-PHP中文網

如何均勻截斷表格儲存格而不隱藏重要內容？

Susan Sarandon

發布： 2024-11-01 14:32:29

原創

1051 人瀏覽過

How to Truncate Table Cells Evenly Without Hiding Important Content?

在不影響內容可見性的情況下截斷表格單元格

Fred 是一個有獨特問題的表格，其單元格大小會不可預測地更改。為了防止細胞重疊並造成混亂，他找到了一個解決方案：截斷細胞內容。然而，這種方法有一個缺點 - 一個單元格可能會比另一個單元格被截斷更多，從而隱藏有價值的內容。

為了解決 Fred 的問題，出現了一種解決方案，涉及使用

。和多個列。透過將第二列的寬度設為 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.This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.
        </td>
        <td style="white-space: nowrap;">
            Less content here.
        </td>
    </tr>
</table></code>

登入後複製

透過遵循這種方法，Fred 可以實現截斷表格單元格的目標，而無需犧牲重要內容的可見性，確保更平衡和用戶友好的餐桌體驗。

以上是如何均勻截斷表格儲存格而不隱藏重要內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！