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;

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