CODEWITHSUNDEEP
htmlcsscss-tables
Eric
Eric

Reputation: 358

How to constrain table-cell width and hide overflowing content

I'm trying to make a two column CSS table (tried HTML table too) with one row where the first column is one line of text and it expands to fit the content. The second column needs to be a single line of text that is right justified and expands left until it hits the first column and then becomes an ellipsis.

This first column is working with white-space: nowrap;. The second column is the issue:

When the content is longer than the second column max width, it will wrap. Once I add white-space: nowrap; it overflows and ignores the width, max-width and overflow: hidden;

Here is a JSFiddle showing what I'm getting vs. what I'm trying to get. Thanks!

https://jsfiddle.net/esodell1/oq59jkr3/10/

UPDATE

Thanks for the responses, but I found a way to accomplish this using flex box!

https://jsfiddle.net/esodell1/jdykzv5m/13/

Upvotes: 0

Views: 3519

Answers (2)

amitdigga
amitdigga

Reputation: 7168

Edit:

Give width units in vw(viewport width). Notice changes in scss of table(width), first-child( width, min-width) and last-child(width, max-width).

This vw will behaved strangely in jsfiddle, try in .html only.

.table {
  display: table;
  padding: 0.25rem;
  width:90vw;

  .row {
    display: table-row;

    .cell {
      display: table-cell;
      border: 1px solid gray;
      padding: 0.25rem;

      &:first-child {
        white-space: nowrap;
        width:20vw;
        min-width:20vw;
      }

      &:last-child {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 70vw;
        max-width: 70vw;
        text-align: right;
      }
    }
  }
}

Previous

By max-width:100% it can stretch to take full size of parent. You need limit it to some percentage or pixels to achieve desired effect.

Removed width:100% as it was useless and changed max-width:200px

&:last-child {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* width: 100%; */
        max-width: 200px;
        text-align: right;
      }

Upvotes: 1

jerrylow
jerrylow

Reputation: 2629

So this is how the text-overflow technique works. There needs to be a defined width of it's parent or a closest parent. You'll need to defined a width for your cell such as:

&:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 85%; 
  text-align: right;
}

But you'll also have to limit your table since table naturally tries to expand as much as the content in its child requires by using table-layout:

.table {
  display: table;
  padding: 0.25rem;
  table-layout: fixed;
  width: 100%;
}

This will make the right column create the ellipsis when the cell reaches 85% of its available width. The problem you'll be faced with is dealing with the left column because you also have no-wrap set on it so that column might actually exceed 15% width and overlap with the right. The issue is both your column is trying not to wrap and fighting for table space, you'll need to apply the same text-overflow technique on the left column. See the the previous and last example here:

https://jsfiddle.net/bhL6sx0g/

To be honest if you're dealing with many columns with dynamic content like this that you don't want wrapping you might want to add a layer of JS on top to do some of your sizing for you else the best option is delegate the actual widths such as a 15/85 split and stick to it.

Upvotes: 2

Related Questions