CSS表格寬度100％和td溢出隱藏沒有td寬度

Question

我有一個表使用100％的區域寬度，它有一些td與溢出隱藏，我需要的是使文本省略號，當文本太長。

我可以使用固定的TD尺寸做到這一點，但我需要讓他們相對於內容

這個問題在3年前這裏：CSS: 100% width table, with cells that have hidden overflow and irregular/minimal cell widths

沒有迴應，我不知道是否現在有可能。

這是對的jsfiddle一個例子：https://jsfiddle.net/gd1fogee/

這是一個片段：

table{ 
 
    width:100%; 
 
} 
 
td{ 
 
\t /*max-width: 150px !important; */ 
 
\t text-overflow: ellipsis; 
 
\t white-space: nowrap; 
 
\t overflow: hidden; 
 
     padding: 3px 5px; 
 
}

<div style="width:400px;display:block;"> 
 
<table> 
 
    <tr> 
 
    <td>one</td><td>two</td><td>three</td> 
 
    </tr> 
 
    <tr> 
 
    <td>this is a very very long text to show what i want to achieve</td><td>two</td><td>three</td> 
 
    </tr> 
 
</table> 
 
</div>

預先感謝您的幫助！

Answer 1

當某些內容太大時，您無法真正地將其設置爲相對於內容的大小。因此，您必須使用所選的最大寬度方法進行設置。如果你在需要被限制的列上放置一個類，那麼可能會使它的大小相對較大，而這些列會有更大的內容。如果只有2列左右的內容過大，則定位tr的特定孩子td。否則，將最大寬度應用於它們全部。

Answer 2

我不知道這是你想要的，但在這裏。

https://jsfiddle.net/Tanikimura/4vypvwcn/

應用文本溢出到p標籤。

table{ 
 
    width:100%; 
 
} 
 
td { 
 
\t max-width: 150px !important; 
 
\t 
 
} 
 
td p{ 
 
\t 
 
\t text-overflow: ellipsis; 
 
\t white-space: nowrap; 
 
\t overflow: hidden; 
 
     padding: 3px 5px; 
 
}

<div style="width:400px;display:block;"> 
 
<table> 
 
    <tr> 
 
    <td>one</td><td>two</td><td>three</td> 
 
    </tr> 
 
    <tr> 
 
    <td><p>this is a very very long text to show what i want to achieve</p></td><td>two</td><td>three</td> 
 
    </tr> 
 
</table> 
 
</div>

Answer 3

所以...我想認爲這一個體面的JS解決方案。儘管這是一個需求改進。如果有人看到這個，並希望改進它，請成爲我的客人，並在評論中告訴我。

const table = document.getElementsByTagName('table')[0]; 
 

 
shrinkCells(table, .75); 
 

 
function shrinkCells(tbl, maxWidth) { 
 
    // Check if it fits within the parent 
 
    if (tbl.offsetWidth <= tbl.parentElement.offsetWidth || maxWidth < .2) { 
 
    return tbl; 
 
    } 
 
    // set the maxWidth for every element that is bigger than the current maxwidth 
 
    Array.from(table.getElementsByTagName('td')).forEach(function (el) { 
 
    if (el.offsetWidth > (tbl.offsetWidth * maxWidth)) 
 
     el.style.maxWidth = (tbl.offsetWidth * maxWidth) + "px"; 
 
    }); 
 
    
 
    shrinkCells(tbl, maxWidth - .05); 
 
}

table{ 
 
    width:100%; 
 
    border-collapse: collapse; 
 
} 
 
td{ 
 
    border: solid 1px #000; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    padding: 3px 5px; 
 
}

<div style="width:400px;display:block;"> 
 
<table> 
 
    <tr> 
 
    <td>one</td><td>two</td><td>three</td> 
 
    </tr> 
 
    <tr> 
 
    <td>this is a very very long text to show what i want to achieve asdhudfaslkjdfhdf asdf asdfasdfa asdf asdfasdf asdf a</td><td>two asdf asd fasd fasd fradfsddf asdf asdf asd fdsaf</td><td>three</td> 
 
    </tr> 
 
</table> 
 
</div>

再次，這是爲它的樂趣寫。讓我知道什麼可以改變，使其更好。