How to Truncate Table Cells Evenly When Content Overflow Occurs?

Linda Hamilton
Release: 2024-10-30 07:51:27
Original
309 people have browsed it

How to Truncate Table Cells Evenly When Content Overflow Occurs?

Evenly Truncating Table Cells

Fred, a table with a fluctuating apartment space, faces the challenge of fitting varying content within his cells. When faced with excess content, Fred resorts to truncating one cell's content to prevent overflowing the table's width. However, he suspects that a better solution may exist where all cells contribute equally to content truncation.

To address Fred's concern, the following approach can be employed:

<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>
Copy after login

In this solution:

  • The colgroup element is introduced to specify two columns: one with a width of 100% to take up most of the table's width, and one with a width of 0% to act as the flexible cell.
  • The first cell has the white-space: nowrap style to prevent line breaking, text-overflow: ellipsis to truncate the content, and overflow: hidden to hide the extra content.
  • The max-width: 1px style on the first cell ensures that it will only take up as much width as needed, leaving the remaining space for the second cell.
  • The second cell uses white-space: nowrap to maintain its original width.

This approach ensures that when there's sufficient space, all cells will display their full content. However, when there's insufficient space, the first cell's content will be truncated first, giving the second cell extra space to display its content.

The above is the detailed content of How to Truncate Table Cells Evenly When Content Overflow Occurs?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!