如何讓單個表格單元在固定的表格佈局中展開？

我有一個固定寬度的表，有3列。我想要第一列根據文本調整大小，第二列是固定寬度，第三列應該佔用空間的剩餘部分並截斷不適合單元格的任何部分（text-overflow：ellipsis）。表格只是單行。如何讓單個表格單元在固定的表格佈局中展開？

這裏是我的表的簡化版本...

<table> 
    <tr> 
     <td>250.9</td> 
     <td> | </td> 
     <td>This is really long and should be truncated</td> 
    </tr> 
</table>

第一列是一個十進制數從1到250，單小數精度。第二列只是第一列和最後一列之間的分隔符。第3列是用戶輸入的標題，可能非常長，但通常適用於提供的空間。

這裏是一個小提琴項目，顯示了一件事我已經試過：http://jsfiddle.net/A4N2z/2/

我也試了一組浮動的div的，但是最後一個div換到下一行，如果它不fit：http://jsfiddle.net/5Epvw/1/

由於它只是一個單獨的行，如果有人知道另一個方法，它不一定是一個表。我們的目標是讓文本排成一排，不超過一定的寬度。

來源

2012-03-23 Brian

您可以使用此代碼塊（可以根據需要更改容器的寬度）

<div id="container"> 
    <div class="nbr">1.2.3</div > 
    <div class="sep"> | </div > 
    <div class="title">This is a really long title</div > 
</div> 

#container 
{ 
    width:500px; 
} 

#container div 
{ 
    display:inline-block; 
}

來源

2012-03-23 19:33:03 Fisch

這似乎並沒有解決問題。 '標題'被推到第二行。 – Brian 2012-03-23 20:45:04

在我使用的表結束和截斷基於字符的標題（我能找到最佳的解決方案）。我使用Sugar.js做客戶端上的實際截斷，因爲該值是動態的，Sugar的truncate方法對截斷字符串的方式非常聰明。

來源

2012-03-28 21:02:42 Brian

如何讓單個表格單元在固定的表格佈局中展開？

回答

相關問題