Text-overflow: ellipsis not working on th element

Question

I have this markup with th elements with text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; .

Also, the td and th is set to display: block .

When I put something like width: 130px on the th the text will show the ellipsis, otherwise not.

I don't know what else to put on the code so I will just post what I have until now:

 table { display: flex; overflow: hidden; } thead { display: flex; flex-shrink: 0; width: 30%; } tbody { display: flex; position: relative; width: 70%; overflow-x: auto; } tr { display: flex; flex-direction: column; min-width: 100%; flex-shrink: 0; } td, th { display: block; font-size: 13pt; border: 1px solid black; } td { border-left: 0; } th { background-color: DarkSlateBlue; font-weight: bold; color: white; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } th:not(:last-child), td:not(:last-child) { border-bottom: 0; } 

 <table> <thead> <tr id="trParticipantes"> <th>&nbsp;</th> <th>Crispy Bacooooooooooooooooooooon</th> <th>Marco</th> <th>Filipe</th> </tr> </thead> <tbody id="tbodyTempos"> <tr> <td>Fase 1</td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> </tr> <tr> <td>Fase 2</td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> </tr> <tr> <td>Fase 3</td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> </tr> <tr> <td>Fase 4</td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> </tr> <tr> <td>Fase 5</td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> </tr> <tr> <td>Fase 6</td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> </tr> <tr> <td>Fase 7</td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> </tr> <tr> <td>Fase 8</td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> </tr> <tr> <td>Fase 9</td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> </tr> <tr> <td>Fase 10</td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> </tr> <tr> <td>Fase 11</td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> </tr> <tr> <td>Fase 12</td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> </tr> <tr> <td>Fase 13</td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> </tr> <tr> <td>Fase 14</td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> </tr> <tr> <td>Fase 15</td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> </tr> <tr> <td>Fase 16</td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> </tr> <tr> <td>Fase 17</td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> </tr> <tr> <td>Fase 18</td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> </tr> <tr> <td>Fase 19</td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> </tr> <tr> <td>Fase 20</td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> <td> <input class="tempo" min="0" step=".1" type="number"> </td> </tr> </tbody> </table> 

Answer 1

The 'flex-shrink' property on your tr needs to be set to 1, otherwise it just flows out of the table into the next. The default value is 1 which tells the display to shrink x the value of other items in the box, since there is only the one item it will fill the box.