如何使用overflow：hidden;文本溢出：省略號;在寬度百分比表內

Question

我想有一個百分比寬度的表，每列也將有一個百分比寬度。我想使用使用CSS來做溢出：隱藏;文本溢出：省略號;但在某些專欄內，它似乎並沒有爲我工作。

以下是我有：

<table style='width:50%;'> 
    <thead> 
    <tr> 
     <td style='width:15%;'>column 1</td> 
     <td style='width:15%;'>column 2</td> 
     <td style='width:70%;'>column 3</td> 
    </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td style='border:1px solid red;'> 
       <div style='overflow:hidden; text-overflow:ellipsis; white-space:nowrap;'>this is some data 1</div> 
      </td> 
      <td style='border:1px solid red;'> 
       <div style='overflow:hidden; text-overflow:ellipsis; white-space:nowrap;'>this is some data 1</div> 
      </td> 
      <td style='border:1px solid red;'>No hiding</td> 
     </tr> 
    </tbody> 
</table> 

隨着頁面變小的第三列變小，而不是前兩列顯示省略號和收縮，因爲我期望的那樣。

Here is a jsfiddle.

Answer 1

table { 
    table-layout:fixed; 
} 

這可能是你在找什麼。上「表格寬度算法」部分

http://jsfiddle.net/wGznj/2/

更多信息，@http://reference.sitepoint.com/css/tableformatting

「隨着固定檯布局算法，列和表的寬度沒有通過的內容管轄。表的單元格「相反，每列的寬度被確定如下：

• 列對象，其寬度不自動設置該列的寬度。
• 第一行中的單元格，其寬度不是自動的，用於設置它所屬列的寬度。如果單元格跨越多個列，則寬度將在列上劃分。
• 任何剩餘列平分剩餘的橫向空間，減去邊框或單元格間距。」