Adding ellipsis inside table cell without widths

Question

I want to ellipsify the text in the second column without hard-coding a width for either of the two columns. Is this possible where only the parent element (table) has a fixed width?

table {
  width: 100px;
  border: 1px solid green;
}

.td1 {
  border: 1px solid blue;
 }

.td2 {
  border: 1px solid red;
 }

.td div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table>
  <tr>
    <td class="td1">Label:</td>
    <td class="td2"><div>thequickbrownfoxjumpsoverthelazydog</div></td>
  </tr>
</table>

I believe the answer is no, with pure CSS. You can get close with `table-layout: fixed` and `overflow: hidden` on the `table` element: https://jsfiddle.net/vpqg4v0n/ — Michael Benjamin, Sep 09 '16 at 01:33
If you're open to JS/jQuery, I've posted some options here: http://stackoverflow.com/a/33061059/3597276 — Michael Benjamin, Sep 09 '16 at 01:35
Just wondering is this question still open since no accepted answer yet? — Stickers, Feb 22 '19 at 01:23

score 5 · Answer 1 · answered Nov 24 '16 at 04:11

You can do that within a nested table, I use a CSS table for the example, and added a span tag into the div for the table layout.

jsFiddle

table {
  width: 200px;
  border: 1px solid green;
}
.td1 {
  border: 1px solid blue;
}
.td2 {
  border: 1px solid red;
}
.td2 div {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.td2 span {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table>
  <tr>
    <td class="td1">Label:</td>
    <td class="td2">
      <div><span>thequickbrownfoxjumpsoverthelazydog</span></div>
    </td>
  </tr>
</table>

Very elegant. It will also work on fluid width tables without `width: 200px;` — alias51, Apr 01 '20 at 14:16

score 1 · Answer 2 · edited Sep 09 '16 at 05:20

You need table-layout: fixed;

More info - https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

The CSS for the ellipsis part is ok, but what happens is that, by default, a table calculates its width based on the content width, so the table cell would be as wide as the content, and the text would never be collapsed. table-layout: fixed; changes that. It means the table will calculate the dimensions of the cells before inserting the content, then the content will not affect the table's dimensions when rendered.

The tradeoff is that your table will no longer balance the columns automatically:

table {
  width: 100px;
  border: 1px solid green;
  table-layout: fixed;
}

.td1 {
  border: 1px solid blue;
 }

.td2 {
  border: 1px solid red;
 }

td div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table>
  <tr>
    <td class="td1">Label:</td>
    <td class="td2"><div>thequickbrownfoxjumpsoverthelazydog</div></td>
  </tr>
</table>

Adding ellipsis inside table cell without widths

2 Answers2