How can I make ellipsis work in an HTML table?

Question

I have some tables on an HTML page where some cells need to be limited in width. Any text that's too long needs to be cut off with ellipsis (...) to show that there is more text. A great job for text-overflow: ellipsis, I would say!

My example looks like this:

<html>

<head>
  <title>Test table ellipsis</title>
  <style>
    table th,
    table td {
      border: 1px solid red;
    }
    
    table .col-A {
      width: 25%;
    }
    
    table .col-B {
      width: 75%;
    }
    
    table .col-B div {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  </style>
</head>

<body>
  <table>
    <thead>
      <th class="col-A">Column A</th>
      <th class="col-B">Column B</th>
    </thead>
    <tbody>
      <tr>
        <td class="col-A">Value A1</td>
        <td class="col-B">Value B1</td>
      </tr>
      <tr>
        <td class="col-A">Value A2</td>
        <td class="col-B">
          <div class="col-B">Value B2 that is going to be ellipsized, because it's way too long!</div>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

At first sight this looks like it works. But the more you look at it, the more it falls apart:

I specified column widths 25% and 75%. This is obviously not the case. Changing the long text directly influences the column widths
The text is "ellipsized", but there's a lot of room left. Why doesn't it use that free space (marked orange below in the screenshot)?

I'm really looking for a solution that works nicely with a table (since the data it's showing is really tabular and I have a ton of existing CSS that assumes tables are used). But at this point I'm also open to solutions that use some combination of div and flexbox.

caramba · Accepted Answer · 2022-04-19T06:31:15.140

Why doesn't it use that free space (marked orange below in the screenshot)?

Because your <div> inside the <td class="col-B"> also has the class col-B and every element wit class col-B inside your table will have a width of 75% which you have specified in your css like so:

table .col-B {
  width: 75%;
}

You can change that in multiple ways. One solution is to overwrite the width of the div like so:

table th,
table td {
  border: 1px solid red;
}

table .col-A {
  width: 25%;
}

table .col-B {
  width: 75%;
}

table .col-B div {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%; /* only added this line */
}

<table>
  <thead>
    <th class="col-A">Column A</th>
    <th class="col-B">Column B</th>
  </thead>
  <tbody>
    <tr>
      <td class="col-A">Value A1</td>
      <td class="col-B">Value B1</td>
    </tr>
    <tr>
      <td class="col-A">Value A2</td>
      <td class="col-B">
        <div class="col-B">Value B2 that is going to be ellipsized, because it's way too long!</div>
      </td>
    </tr>
  </tbody>
</table>

the obvious other way is to remove the class from the div...

table th,
table td {
  border: 1px solid red;
}

table .col-A {
  width: 25%;
}

table .col-B {
  width: 75%;
}

table .col-B div {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<table>
  <thead>
    <th class="col-A">Column A</th>
    <th class="col-B">Column B</th>
  </thead>
  <tbody>
    <tr>
      <td class="col-A">Value A1</td>
      <td class="col-B">Value B1</td>
    </tr>
    <tr>
      <td class="col-A">Value A2</td>
      <td class="col-B">
        <div>Value B2 that is going to be ellipsized, because it's way too long!</div>
      </td>
    </tr>
  </tbody>
</table>

Side note: Tables don't take up a width of 100% per default. You could solve that width adding:

table {
    width: 100%;
}

But now, with table width: 100%; The ellipsis is not working anymore. Maybe there are other better ways but the only way I was able to make it work was with some positioning (which ain't the nicest solution) but it works:

table {
  width: 100%;
}

table th,
table td {
  border: 1px solid red;
}

table .col-A {
  width: 25%;
}

table .col-B {
  position: relative;
  width: 75%;
}

table .col-B > div {
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  left: 1px;
  right: 0;
  top: 0;
  bottom: 0;
}

<table>
  <thead>
    <th class="col-A">Column A</th>
    <th class="col-B">Column B</th>
  </thead>
  <tbody>
    <tr>
      <td class="col-A">Value A1</td>
      <td class="col-B">Value B1</td>
    </tr>
    <tr>
      <td class="col-A">Value A2</td>
      <td class="col-B">
        <div>Value B2 that is going to be ellipsized, because it's way too long!</div>
      </td>
    </tr>
    <tr>
      <td class="col-A">Value A3</td>
      <td class="col-B" >
        <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
      </td>
    </tr>
  </tbody>
</table>

Thanks for the clear explanation! I'll have to try your solution on the full code, but this looks very promising. — CameO73, Apr 18 '22 at 20:51

How can I make ellipsis work in an HTML table?

1 Answers1

Linked