tableテーブル内のコンテンツオーバーフローの解決方法

506 ワード

cssが文字オーバーフローを解決して省略記号になった場合、コードは以下の通りです.
/*      */
td, th {
    white-space:nowrap;  //       
    overflow:hidden;    //         
    text-overflow:ellipsis; //         ,        …
    word-break:keep-all;  //        
}

ただし、tableに入れると理想的な効果は得られず、table要素にスタイルを追加する必要があります.
table{  
    width:100px;  
    table-layout:fixed;/*              fixed,  td        。 */  
}  

これにより、文字オーバーフローを省略記号に変更できます.
もちろん、オーバーフロー効果をよりよく表示するには、td、thに幅を付ける必要があります.