#StackBounty: #html #css Hide overflow of column with ellipsis, shrink other cols to fit content, don't set any table/col widths, a…

Bounty: 50

Here is my code:

<style type="text/css">
div {
  width: 250px;
}

table {
  white-space: nowrap;
}

th {
  max-width: 175px;
  overflow: hidden;
  text-overflow: ellipsis;
}
th:hover {
  overflow: visible;
  position: relative;
}
th:hover span {
  background-color: white;
}
td {
  width: 100%;
}
</style>

Short Header value
Quite Long Header value
MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader value

And here is an example on JSFiddle: https://jsfiddle.net/3ptc3fL5/

Notice how the first column in the last row of the table is too wide to fit, so it overflows with an ellipsis. But if you hover over it, it expands to show the whole value.

However if I get rid of the max-width style of th, it all falls apart. The table no longer fits within the parent div. This is a problem because I would like to achieve this same effect without having to pre-specify the width.

My reason is that I want to make a generic utility class I can use in different tables in different responsive pages. In the general case, I don’t know the width of the parent div (especially on responsive pages), I don’t know the widths of the other columns in the table, and I don’t want to have to go through and manually figure it out in every case and keep that up to date with every change.

I just want all the columns except the first to shrink as much as possible without overflow, and for the first to column expand as much as it can while keeping the table inside the parent div while hiding any overflow of its contents with an ellipsis at the end.

I realize there are about 5000 similar questions here, but at this point I think I’ve looked through all of them and still haven’t found anything that works. This is pretty close, but doesn’t respect the size of a wrapping div. Any ideas?


Get this bounty!!!

Leave a Reply