CSS text-overflow in a table cell

Question

In a table, with css, I want to display the text of the first cell on several adjacent cells like the image below :

thanks in advance for your help

enter image description here

with this css the text has been clipped, but this is not what I wanted

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

Answer 1

Is this what you are looking for?

overflow: visible

Answer 2

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

The table-layout CSS property sets the algorithm used to lay out table cells, rows, and columns.

fixed

Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

Under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the "automatic" layout method, but subsequent cell content might not fit in the column widths provided. Cells use the overflow property to determine whether to clip any overflowing content, but only if the table has a known width; otherwise, they won't overflow the cells.

table{
  table-layout: fixed; /* <---- this makes the difference */
  border-collapse: collapse;
  width: 50%;  
  margin: 0 auto; 
}

td{  
 white-space: nowrap; /* <---- and this also */
}

td{
  border: solid black;
  max-width: 33%;
}

<table>
  <tr>
    <td>this is a very long text that should overflow the table cell</td>
    <td></td>
    <td></td>
  </tr>
</table>