CSS table width 100% and td overflow hidden with no td width

Question

I have a table using a 100% area width, and it has some td with overflow hidden, what I need is make their texts ellipsis when text is too long.

I can do it using fixed td sizes, but I need make them relative to content

This question was made 3 years ago here: CSS: 100% width table, with cells that have hidden overflow and irregular/minimal cell widths

There are no responses, I wonder if is possible now.

This is an example on jsFiddle: https://jsfiddle.net/gd1fogee/

This is a snippet:

table{
  width:100%;
}
td{
 /*max-width: 150px !important; */
 text-overflow: ellipsis;
 white-space: nowrap;
 overflow: hidden;
      padding: 3px 5px;
}

<div style="width:400px;display:block;">
<table>
  <tr>
    <td>one</td><td>two</td><td>three</td>
  </tr>
  <tr>
    <td>this is a very very long text to show what i want to achieve</td><td>two</td><td>three</td>
  </tr>
</table>
</div>

Thank you in advance for your help!

I don't know if you've got what you're looking for now, but if not, please give an example of what you'd like the results to look like (through a picture or hard coded example) — Trevor Nestman, Oct 13 '17 at 22:09

score 3 · Accepted Answer · answered Jun 01 '17 at 19:21

I do not know if this is what you want but here it is.

https://jsfiddle.net/Tanikimura/4vypvwcn/

Apply text-overflow to a p tag.

table{
  width:100%;
}
td {
 max-width: 150px !important; 
 
}
td p{
 
 text-overflow: ellipsis;
 white-space: nowrap;
 overflow: hidden;
      padding: 3px 5px;
}

<div style="width:400px;display:block;">
<table>
  <tr>
    <td>one</td><td>two</td><td>three</td>
  </tr>
  <tr>
    <td><p>this is a very very long text to show what i want to achieve</p></td><td>two</td><td>three</td>
  </tr>
</table>
</div>

score 2 · Answer 2 · answered Jun 01 '17 at 18:59

2

You can't really make it sized relative to the content when some of the content is too large... So you'd have to do it by the max-width method you chose. Might make it more relatively sized if you put a class on the columns that needed to be limited, that would have the larger content. Target a specific child td of a tr if it is just 2 or so columns that will have oversized content. Otherwise apply the max-width to all of them.

answered Jun 01 '17 at 18:59

Sensoray

2,360
2
18
27

It is not a specific column, every cell can be longer, similar to how PHPMyAdmin cut texts, but it doesn't use CSS but PHP. – stramin Jun 01 '17 at 21:39
You might could set it as a table-layout:fixed with a width of 100%; That would make each column the same width and responsive still, and it would do the ellipses with your current code. You wouldn't have to set a specific width for the columns then. And you could add more columns without having to recalculate widths. – Sensoray Jun 02 '17 at 12:37
I tried, seems like table-layout:fixed; make all the colums same width, they don't go bigger or smaller depending of content :( – stramin Jun 02 '17 at 19:28
1

That's because you said that random cells will have a lot of content..so you can't size them based on content, you have to give them a fixed size. Otherwise what you could do is use js to do it. Get the content of the td's, if they exceed a certain amount of characters, truncate it, then you can append the ... to the end of the truncated strings. However, this will mean that the td's will be the width of the largest content, which is by default the max character length you give. https://stackoverflow.com/questions/17249593/how-can-i-limit-a-string-to-no-more-than-a-certain-length – Sensoray Jun 02 '17 at 20:06
Using JS is not bad idea... I am using a max-width now, is not the best solution but it is something... Thank you for your help! – stramin Jun 05 '17 at 18:35

Trevor Nestman · Answer 3 · 2017-10-26T21:05:02.390

So... I'm trying to think of a decent JS solution for this. It's a needs improvement though. If anyone looks at this and would like to improve on it, be my guest and let me know in the comments.

const table = document.getElementsByTagName('table')[0];

shrinkCells(table, .75);

function shrinkCells(tbl, maxWidth) {
  // Check if it fits within the parent
  if (tbl.offsetWidth <= tbl.parentElement.offsetWidth || maxWidth < .2) {
    return tbl;
  }
  // set the maxWidth for every element that is bigger than the current maxwidth
  Array.from(table.getElementsByTagName('td')).forEach(function (el) {
    if (el.offsetWidth > (tbl.offsetWidth * maxWidth))
      el.style.maxWidth = (tbl.offsetWidth * maxWidth) + "px";
  });
  
  shrinkCells(tbl, maxWidth - .05);
}

table{
  width:100%;
  border-collapse: collapse;
}
td{
  border: solid 1px #000;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 3px 5px;
}

<div style="width:400px;display:block;">
<table>
  <tr>
    <td>one</td><td>two</td><td>three</td>
  </tr>
  <tr>
    <td>this is a very very long text to show what i want to achieve asdhudfaslkjdfhdf asdf asdfasdfa asdf asdfasdf asdf a</td><td>two asdf asd fasd fasd fradfsddf asdf asdf asd fdsaf</td><td>three</td>
  </tr>
</table>
</div>

Again, this was written for the fun of it. Let me know what could be changed to make it better.

score 0 · Answer 4 · answered Apr 07 '22 at 20:47

Almost 5 years later I am still not able to find a perfect solution using tables, but I found a workaround using grid and its columns to auto width:

grid-template-columns: repeat(3, auto);

.grid{
    width:100%;
    display:grid;
    grid-template-columns: repeat(3, auto);
}
.grid div{
    /*max-width: 150px !important; */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 3px 5px;
}

<div style="width:400px;display:block;">
  <div class="grid">
    <div>one</div><div>two</div><div>three</div>
    <div>this is a very very long text to show what i want to achieve</div><div>two</div><div>three</div>
  </div>
</div>

CSS table width 100% and td overflow hidden with no td width

4 Answers4