具有百分比最大寬度的CSS文本溢出表格單元格

我有一個具有百分比寬度列的表格。如果這些單元格內的內容超過了這個百分比寬度，我希望它被省略號截斷。具有百分比最大寬度的CSS文本溢出表格單元格

根據CSS text-overflow in a table cell?我應該使用max-width屬性，但根據How can I set the max-width of a table cell using percentages?我不能用百分比。

table { 
 
    width: 100%; 
 
} 
 
table td { 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
} 
 
table tr td:nth-of-type(1) { 
 
    width: 20%; 
 
} 
 
table tr td:nth-of-type(2) { 
 
    width: 30%; 
 
} 
 
table tr td:nth-of-type(3) { 
 
    width: 50%; 
 
}

<table> 
 

 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 

 
</table>

我怎樣才能解決這個問題？

來源

2014-12-07 Harangue

你應該使用'column-count：3;'[CSS3多列]（http://www.w3schools.com/css/css3_multiple_columns.asp） – Rafael 2014-12-07 00:38:53

div我不明白爲什麼我應該 - 它是一個有表格數據的表格。 – Harangue 2014-12-07 00:42:24

這不能使用標準的HTML表格：自動佈局算法會保持拉伸單元格，以便它們始終能夠適合其內容，甚至忽略顯式寬度。

切換到table-layout:fixed和everything will work as intended。

來源

2014-12-07 01:13:36

-2

table { 
    width: 100%; 
} 
table td:nth-of-type(1) { width: 33% ;} 
table td:nth-of-type(2) { width: 33% ;} 
table td:nth-of-type(3) { width: 33% ;}

你可以做到這一點，選擇TD的，給他們的33％的寬度父= 100％/ 3 = 33.333

，如果你有4 TD當時的寬度爲25％等等，等等。

來源

2014-12-07 00:48:42 SkullDev

這不會告訴我如何防止溢出改變列的寬度。 – Harangue 2014-12-07 00:58:58

此外，它只是不會工作。使用自動錶格佈局時，'width'語句將僅用作佈局算法的指導。 – 2014-12-07 01:21:06

@ J4G我不明白你的意思？如果你有一個容器（假設它是視口的80％），並且你有一個80％的寬度爲100％的表格，並且你認爲td應該是33％，那麼它不會大於這個值，如果你想，你可以說： '最大寬度：33％' 這意味着td不能超過家長的33％，因爲這是它的最大寬度。也許我錯過了這一點？就我所知，從基於％的項目中不應該出現「溢出」，從經驗來看，它從來沒有發生過。 – SkullDev 2014-12-07 15:26:17

layout: fixed不適用於所有情況，並且表格應該是流動的並且自動將其單元格空間化，這也意味着爲某些單元格設置1％並使其他單元格自動調整。

使用此：http://jsfiddle.net/maruxa1j/

作品在IE9 +了。

來源

2015-05-21 00:25:23

具有百分比最大寬度的CSS文本溢出表格單元格

回答

相關問題