文本溢出：省略號不能在th元素上工作

我有th元素與text-overflow: ellipsis; overflow: hidden; white-space: nowrap;這個標記。文本溢出：省略號不能在th元素上工作

此外，td和th設置爲display: block。

當我把width: 130px放在th上時，文本將顯示省略號，否則顯示省略號。

我不知道該怎麼把別人的代碼，所以我將只寄我直到現在：

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>

來源

2016-07-12 Filipe Teixeira

您已將

變成flexbox佈局，原因是什麼？ – Stickers

得到一個響應表。 tbody將根據用戶滑動進行滾動。 thead固定在左側，tbody固定在右側，每個佔據父元素寬度的50％（在我的例子中，我把一個滾動條） –

回答

的「柔性縮水」財產上的TR需要設置爲1，否則它只會從表中流出到下一個表中。默認值是1，它告訴顯示器縮小盒子中其他項目的值，因爲只有一個項目會填滿盒子。

來源

2016-07-12 19:15:09 TheHamstring

DUDE I LOVE YOU –

相關問題