このケースではテキストオーバーフローはどうですか？

Question

この表のテキストオーバーフローデータを使用したいのですが、私はそれを動作させるために多くの方法を試していますが、それはFirefoxでも動作します。 IE。

そして、方法は使用するブートストラップではありません。

この場合、適切なCSSを使用してください。

これは私のCSSコードの例です：デフォルトでは

.table { 
 
     width: 450px; 
 
     max-width: 450px; 
 
     } 
 
     .col-1 { 
 
     width: 30%; 
 
     max-width: 30%; 
 
     overflow: hidden; 
 
     text-overflow: clip !important; 
 
     white-space: nowrap; 
 
     word-wrap: break-word; 
 
     } 
 
     .col-2 { 
 
     width: 40%; 
 
     max-width: 40%; 
 
     overflow: hidden; 
 
     text-overflow: clip !important; 
 
     white-space: nowrap; 
 
     word-wrap: break-word; 
 
     } 
 
     .col-3 { 
 
     width: 30%; 
 
     max-width: 30%; 
 
     overflow: hidden; 
 
     text-overflow: clip !important; 
 
     white-space: nowrap; 
 
     word-wrap: break-word; 
 
     }

<table class="table" border="0" cellspacing="5" cellpadding="5"> 
 
     <tbody> 
 
     <tr> 
 
      <td class="col-1">longgggggggggggggg gggggggggggg</td> 
 
      <td class="col-2">longgggggggggggggg ggggggggggggg</td> 
 
      <td class="col-3">longgggggggggggggg ggggggggggggg</td> 
 
     </tr> 
 
     <tr> 
 
      <td class="col-1">longerrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrr</td> 
 
      <td class="col-2">longerrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrr</td> 
 
      <td class="col-3">longerrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrr</td> 
 
     </tr> 
 
     <tr> 
 
      <td class="col-1">longestttttttttttttttttttttttttttttttt tttttttttttttttttttttttttttttt</td> 
 
      <td class="col-2">longestttttttttttttttttttttttttttttttt tttttttttttttttttttttttttttttt</td> 
 
      <td class="col-3">longestttttttttttttttttttttttttttttttt tttttttttttttttttttttttttttttt</td> 
 
     </tr> 
 
     </tbody> 
 
    </table>

Answer 1

、表のセルは、そのコンテンツと同じ幅であることが要求されています。

しかし、table-layout: fixedを使用すると、コンテンツを無視するより高速で信頼性の高いレイアウトモードに切り替えることができます。

.table { 
 
    width: 450px; 
 
    table-layout: fixed; 
 
} 
 
td { 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 
.col-1, .col-3 { 
 
    width: 30%; 
 
} 
 
.col-2 { 
 
    width: 40%; 
 
}

<table class="table" border="0" cellspacing="5" cellpadding="5"> 
 
    <tbody> 
 
    <tr> 
 
     <td class="col-1">longgggggggggggggg gggggggggggg</td> 
 
     <td class="col-2">longgggggggggggggg ggggggggggggg</td> 
 
     <td class="col-3">longgggggggggggggg ggggggggggggg</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="col-1">longerrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrr</td> 
 
     <td class="col-2">longerrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrr</td> 
 
     <td class="col-3">longerrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrr</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="col-1">longestttttttttttttttttttttttttttttttt tttttttttttttttttttttttttttttt</td> 
 
     <td class="col-2">longestttttttttttttttttttttttttttttttt tttttttttttttttttttttttttttttt</td> 
 
     <td class="col-3">longestttttttttttttttttttttttttttttttt tttttttttttttttttttttttttttttt</td> 
 
    </tr> 
 
    </tbody> 
 
</table>