html表格比較寬溢出的解決方法

2020-05-20 16:05:30 來源：互聯(lián)網(wǎng)作者：佚名 人氣： 次閱讀 99 條評論

文章主要介紹了html 表格比較寬溢出的解決方法，表格如果比較寬，則有可能溢出，所以下面的方法，大家可以看看表格如果比較寬，則有可能溢出。比如有兩個div，左和右。如果表格在右邊的...

文章主要介紹了html 表格比較寬溢出的解決方法，表格如果比較寬，則有可能溢出，所以下面的方法，大家可以看看

表格如果比較寬，則有可能溢出。

比如有兩個div，左和右。如果表格在右邊的div中，但是它比較寬，則顯示的時候很可能右邊的div中沒有顯示，而是顯示在了下邊。此時只要規(guī)定這個表格的寬度即可：

代碼如下:

<table style='width:85%'>

解決html表格中內(nèi)容超出不強(qiáng)制換行和超出寬度自動隱藏并顯示省略號

在表格布局中經(jīng)常會遇到因?yàn)楸砀駜?nèi)容長短的變化導(dǎo)致布局混亂的情況，這個時候我們可能會有為了布局穩(wěn)定把單元格寬度寫死的情況；但是我們設(shè)置了寬度卻發(fā)現(xiàn)超出了寬度之后會自動變大，用css定義元素的overflow:hidden;屬性也不行；最后找的的解決方案如下：

table{
    
    table-layout:fixed;/* 只有定義了表格的布局算法為fixed，下面td的定義才能起作用。 */
}
td{
    width:100%;
    word-break:keep-all;/* 不換行 */
    white-space:nowrap;/* 不換行 */
    overflow:hidden;/* 內(nèi)容超出寬度時隱藏超出部分的內(nèi)容 */
    text-overflow:ellipsis;/* 當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記(...) ；需與overflow:hidden;一起使用。*/
}
如果擔(dān)心隱藏了看不到完整的單元格內(nèi)容建議在單元格上面加上title屬性值就是單元格的完整內(nèi)容這樣只要鼠標(biāo)經(jīng)過就能顯示全部了