1. 首页
  2. 问答
  3. 文本溢出：省略号不能在th元素上工作

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

2016-07-12 70 views
2

我有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

+0

您已将

变成flexbox布局，原因是什么？ – Stickers

+0

得到一个响应表。 tbody将根据用户滑动进行滚动。 thead固定在左侧，tbody固定在右侧，每个占据父元素宽度的50％（在我的例子中，我把一个滚动条） –

回答

4

的“柔性缩水”财产上的TR需要设置为1，否则它只会从表中流出到下一个表中。默认值是1，它告诉显示器缩小盒子中其他项目的值，因为只有一个项目会填满盒子。

来源

2016-07-12 19:15:09 TheHamstring

+1

DUDE I LOVE YOU –

相关问题

 相关问题