text-overflow: ellipsis; in table cell

Question

I have a page with a table, which is updated periodically. The table has a heading, followed by a number of rows. Each row has 3 fields: Player position, Player name (also a link to the player's profile), and the player's time. The table takes up the entire page width.

The html looks like this:

<table id="raceTable">
  <tbody>
    <tr><th colspan="3">3 Players</th></tr>
    <tr><td>1st</td><td><a>Link to profile of player A</a></td><td>00:22:12</td></tr>
    <tr><td>2st</td><td><a>Link to profile of player B</a></td><td>00:23:12</td></tr>
    <tr><td>3st</td><td><a>Link to profile of player C</a></td><td>00:24:15</td></tr>
  </tbody>
</table>

Now, I want to make the table scalable. If the user changes the width of the window, the table should be resized, the text in the middle column should be clipped when it doesn't fit.

This is the CSS I've tried:

body{
  overflow: hidden;
}

table {
    width:100%;
    line-height: 50px;
    border-collapse: collapse;
}

th {
    height: 50px;
    width: 100%;
    background-color: magenta;
}

td {
   height: 50px;
}

#raceTable {
    width: 100%;
}

#raceTable > tbody > tr:not(:first-child) > td:nth-child(1) {
  padding: 10px;
  background-color: red;
  float: left;
}

#raceTable > tbody > tr:not(:first-child) > td:nth-child(2) {
  width: 100%;
  background-color: gray;
}

#raceTable > tbody > tr:not(:first-child) > td:nth-child(2) > a{
  display: block;
  background-color: white;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}  

#raceTable > tbody > tr:not(:first-child) > td:nth-child(3) {
  padding: 10px;
  background: green;
  float: right;
}

And I have a JSFiddle of it all here: http://jsfiddle.net/Gikkman/5wpts61p/17/

My question is, how do I make text-overflow: ellipsis; to work for the link text in the middle column of the table? I cannot change how the HTML of the site is structured, I can only apply CSS. Is this possible?

text-overflow do not work on inline element. reset a to block or inline-block + width. but td would do the job — G-Cyrillus, Feb 24 '17 at 23:16
@GCyrillus Actually OP has the set to block in the css, Apart from my answer I would love to see any easier way to do it if you want to suggest. — Stickers, Feb 24 '17 at 23:20
@Pangloss i guess i got confused reading the css with the float right/left i took the display:block for the td ... else the basic idea was http://jsfiddle.net/5wpts61p/18/ which is what you also proposed :) (table-layout:fixed) — G-Cyrillus, Feb 24 '17 at 23:31
Is it possible to explicity set the width of the left and right table rows (say 30px for the left and 100px for the right) when using table-layout: fixed? — Gikkman, Feb 24 '17 at 23:46
Yes, if you use some extra markup to set without confusion width for each cols ( or avoid the colspan attribute ) i answered below with a snippet — G-Cyrillus, Feb 24 '17 at 23:50
@GCyrillus That works for equal width columns, but the dynamic width stopped working (middle column takes entire width available). — Stickers, Feb 24 '17 at 23:52
@Pangloss yes, it is because of the colspan attribute (remove it ) or use colgroup, see my answer :) — G-Cyrillus, Feb 24 '17 at 23:53
@GCyrillus Correct I answered a similar question lately too with colgroup and col approach http://stackoverflow.com/a/42347134/483779 — Stickers, Feb 24 '17 at 23:55
Already answered in another SO post. https://stackoverflow.com/a/44452722/828062 — zendu, Jul 11 '17 at 22:37
Possible duplicate of [CSS text-overflow in a table cell?](https://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell) — Protomen, Aug 21 '18 at 20:51

Stickers · Answer 1 · 2017-02-24T23:25:27.317

In table, text-overflow: ellipsis; only works with fixed table layout, normally you can just apply:

#raceTable {
  table-layout: fixed;
  width: 100%;
}

But it looks like you also want to have dynamic width for the columns. In that case you can wrap the <a> with a <div> to create a CSS fixed table layout structure, then apply the text overflow on it.

#raceTable td:nth-child(2) div {
  display: table;
  table-layout: fixed;
  width: 100%;
}
#raceTable td:nth-child(2) a {
  display: table-cell;
  background-color: white;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

#raceTable {
  line-height: 50px;
  border-collapse: collapse;
  width: 100%;
}

#raceTable th {
  height: 50px;
  background-color: magenta;
}

#raceTable td {
  height: 50px;
}

#raceTable td:nth-child(1) {
  padding: 10px;
  background-color: red;
  /* float: left; */
}

#raceTable td:nth-child(2) {
  width: 100%;
  background-color: gray;
}

#raceTable td:nth-child(2) div {
  display: table;
  table-layout: fixed;
  width: 100%;
}

#raceTable td:nth-child(2) a {
  display: table-cell;
  background-color: white;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

#raceTable td:nth-child(3) {
  padding: 10px;
  background: green;
  /* float: right; */
}

<table id="raceTable">
  <thead>
    <tr>
      <th colspan="3">3 Players</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1st</td>
      <td><div><a>Link to profile of player A, Link to profile of player A, Link to profile of player A</a></div></td>
      <td>00:22:12</td>
    </tr>
    <tr>
      <td>2st</td>
      <td><div><a>Link to profile of player B</a></div></td>
      <td>00:23:12</td>
    </tr>
    <tr>
      <td>3st</td>
      <td><div><a>Link to profile of player C</a></div></td>
      <td>00:24:15</td>
    </tr>
  </tbody>
</table>

Can this wrapping be done without owning the page in question? Since I am trying to reformat someone else's page, I cannot change the source html. — Gikkman, Feb 24 '17 at 23:43
@Gikkman As far as I know some html changes is required to make it work. — Stickers, Feb 24 '17 at 23:53

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

after reconsidering my comment, I would still advise to style your table with table-layout:fixed; and reset default display on a as you did, but build it with a little more table elements.

https://www.w3.org/wiki/HTML/Elements/colgroup

https://www.w3.org/WAI/UA/TS/html401/cp1001/1001-COL-COLGROUP.html

table {
  width:100%;
  table-layout:fixed;
  line-height:50px;
}
thead {background:green;}
td {width:100%;}
col {background:gray;}
col:first-child, col:last-child {
  width:4em;
  background:red;
}
col:last-child {
  background:cyan;
}
a {  display:block;
  background-color: white;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width:100%;}

<table id="raceTable">
  <colgroup>
    <col/>
    <col/>
    <col/>
    </col>
  <thead>
    <tr>
      <th colspan="3">3 Players</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1st</td>
      <td><a>Link to profile of player A</a></td>
      <td>00:22:12</td>
    </tr>
    <tr>
      <td>2st</td>
      <td><a>Link to profile of player B</a></td>
      <td>00:23:12</td>
    </tr>
    <tr>
      <td>3st</td>
      <td><a>Link to profile of player C Link to profile of player C Link to profile of player C</a></td>
      <td>00:24:15</td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/bn2trf2o

What happens here is the colspan attribute on th and table-layout:fixed; that shares evenly the columns.

To avoid this confusion, you can use the colgroup and col tags to init each width for each columns. Size first and last , the middle will use all space left.You can use them also to set a background defaut color for each columns. it will be hidden as soon as you set a bg on any other elements(like thead does in the snippet)

edit

from your structure , a display reset on trs could do :

table,
tr {
  width: 100%;
  table-layout: fixed;
  line-height: 50px;
  border-spacing: 0;
}

tr {
  display: table;
}

th {
  background: magenta
}

td {
  background: gray;
}

td:first-child,
td:last-child {
  width: 30px;
  background: red;
}

td:last-child {
  background: cyan;
  width: 100px;
}

a {
  display: block;
  background-color: white;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<table id="raceTable">
  <tbody>
    <tr>
      <th colspan="3">3 Players</th>
    </tr>
    <tr>
      <td>1st</td>
      <td><a>Link to profile of player A</a></td>
      <td>00:22:12</td>
    </tr>
    <tr>
      <td>2st</td>
      <td><a>Link to profile of player B</a></td>
      <td>00:23:12</td>
    </tr>
    <tr>
      <td>3st</td>
      <td><a>Link to profile of player C Link to profile of player C Link to profile of player C</a></td>
      <td>00:24:15</td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/bn2trf2o/1/

Very neat solution. Is this somehow doable without being able to change the underlying html? As I wrote in the question, I cannot change the html of the site, since I am not in control of it. Are columns added implicitly to tables somehow? — Gikkman, Feb 25 '17 at 00:07
@Gikkman You could if resetting tr display causes no arm to the full layout of your real table : https://jsfiddle.net/bn2trf2o/1/ — G-Cyrillus, Feb 25 '17 at 00:16
Ha, you made it! Awesome. Man... I would never have figured this one out... — Gikkman, Feb 25 '17 at 00:25

text-overflow: ellipsis; in table cell

2 Answers2

edit