How to use ellipsis in a table cell?

Question

<div className="container">
  <div className="left-area">
    <div className="container2">
      <table>
        <tbody>
          <tr>
            <td>
              48148581581581858158158iffjafjadjfjafdjafdjfjadfjdjafdjafdjajdfjadfjdafjdajfajfdjaf
            </td>
            <td>1/1/0001</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

I want to truncate that very long text.

.container {
  margin-top: 20px;
  width: 90%;
  display: flex;
  .left-area {
    flex: 1 1 20%;
    .container2 {
      flex: 1 1 20%;
      table {
        width: 100%;
      }
    }
  }
}

I tried to use this css on the td cell

  white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

Elegance

you mean "how to ellipse text in table cell"? maybe you should look in the text-overflow: ellipsis; property – Damning

Yes in the table cell. – Elegance

Answer 1

The missing key is table-layout: fixed.

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

td {
  width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table>
  <tbody>
    <tr>
      <td>
        48148581581581858158158iffjafjadjfjafdjafdjfjadfjdjafdjafdjajdfjadfjdafjdajfajfdjaf
      </td>
      <td>1/1/0001</td>
    </tr>
  </tbody>
</table>

With table-layout: auto (the default setting), the browser uses an automatic layout algorithm that checks the content size to set the width of the cells (and, therefore, columns). The width and overflow properties are ignored in this scenario, and ellipsis can't work.

With table-layout: fixed, you can define the width of the cells on the first row (and, therefore, set the column widths for the table). The width and overflow properties are respected in this case, allowing the ellipsis function to work.

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

Yerxa

I tested it and indeed, ellipses only worked with fixed, but it was not an ordinary plain <table> but a Javascript grid widget library-generated table, so setting fixed made the library malfunction. I do not understand why ellipses logically cannot work with auto sizing. I mean, with auto sizing, when the text is long (not unbreakable string like OP), it gets word-wrapped in multiple lines. Can't the browser simply show the first line of that with an ellipses and hide other lines? – Fuddle