テキストオーバーフロー：要素上で省略記号が機能しない

thの要素にtext-overflow: ellipsis; overflow: hidden; white-space: nowrap;のマークアップがあります。テキストオーバーフロー：要素上で省略記号が機能しない

また、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

をフレックスボックスレイアウトに変更したのはなぜですか？ – Stickers

応答テーブルを取得します。 tbodyはユーザーのスワイプに従ってスクロールします。 theadは左に固定され、tbodyは右に固定され、それぞれ親要素の幅の50％を占めます（例ではスクロールバーを入れます） –

答えて

あなたのTRの「フレックスシュリンク」プロパティ1に設定する必要があります。それ以外の場合は、テーブルから次のテーブルに流出します。デフォルト値は1です。これは、ボックスに記入する項目が1つしかないため、ボックス内の他の項目の値を縮小するようにディスプレイに指示します。

出典

2016-07-12 19:15:09 TheHamstring

DUDE I LOVE YOU –

テキストオーバーフロー：要素上で省略記号が機能しない

答えて

関連する問題