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

user_2966583 0
Viewed 2942

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!

html-table overflow css html
4 Answers

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.

user_56679510

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>

user_29665830
Related