Text-Überlauf: Ellipse funktioniert nicht auf Th-Element

Question

Ich habe dieses Markup mit th Elemente mit text-overflow: ellipsis; overflow: hidden; white-space: nowrap;.

Auch td und th sind auf display: block eingestellt.

Wenn ich etwas wie width: 130px auf die th setzen, zeigt der Text die Ellipse, sonst nicht.

Ich weiß nicht, was sonst noch auf dem Code zu setzen, damit ich nur schreiben, was ich habe bis jetzt:

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>