3列表，寬度：自動，50％，50％，溢出隱藏

Question

我試圖在移動網站設計中重新創建每日計劃視圖。 PC版本看起來是這樣的：

這將有幾行，以及高達5個或6列。我認爲一張桌子最好，但無法找到正確的CSS/HTML來實現我想要的效果。

我想的第一列具有一個自動的寬度，以適應內容，剩下的爲等於（均勻分佈）。整個表格將是100％寬度。

我可以通過設置列寬如下得到：0; 50％; 50％; - 而不是使用問題是，由於內容太大，我無法讓任何單元格的寬度變得更寬。如果我使用table-layout: fixed，它會保持單元格大小正確，但第一列是0寬度，而不是自動/適合。我嘗試將每個單元格內的內容放在一個span或div中，並將其設置爲：width: 100%; overflow: hidden;，但我不認爲寬度：100％真正適用於未固定的表格。

如果我真的有，我將設置爲第一列一個固定的寬度，但我想避免這種情況，因爲我不希望使用固定的字體大小 - 尤其是因爲這將是一個移動網站，用於智能手機和平板電腦。

我可能可以通過使用嵌套表或浮動來做些事情......第一列不是同一張表的一部分，但我希望有一個超級乾淨的解決方案，我錯過了，我可以把所有這些放在一張表中。

編輯：按照要求，這裏是我的代碼一個版本，我都試過了。在名字前面有X的風格都只是不同的事情我已經試過（我加X快速移除，並輕鬆地把背）：

<table cellpadding="0" cellspacing="0" style="width: 100%; xwhite-space: nowrap; xtable-layout: fixed;"> 
    <tr> 
    <td style="width: 0; background-color: Lime;"> 
    Time 
    </td> 
    <td style="width: 50%; background-color: Silver;"> 
    ERIC 
    </td> 
    <td style="width: 50%; background-color: Gray;"> 
    DONNA 
    </td> 
    </tr> 
    <tr> 
    <td>8:00am</td><td>&nbsp;</td><td>Do Something</td> 
    </tr> 
    <tr> 
    <td>9:00am</td><td style="width: 50%; overflow: hidden;"><div style="width: 100%; height: 100%; overflow: hidden;">Do Something else with more text so we can see how this works when too long and really longer than it ever should be</div></td><td style="width: 50%;">&nbsp;</td> 
    </tr> 
    </table> 

上述版本是接近我有，但早上9點的「ERIC」長文本包裝成多行。如果我改變它不換行，那麼單元變得太寬（即使溢出：隱藏）。

Answer 1

如果它不能夠做什麼，我想用一個表，這裏是一個嵌套表的解決方案，似乎並不那麼糟糕，因爲我想：

<table cellpadding="0" cellspacing="0" style="width: 100%;"> 
<tr> 
<td style="width: 0;"> 
<table cellpadding="0" cellspacing="0"> 
<tr><td>Time</td></tr> 
<tr><td>8:00am</td></tr> 
<tr><td>9:00am</td></tr> 
</table> 
</td> 
<td> 
<table cellpadding="0" cellspacing="0" style="width: 100%; table-layout: fixed; white-space: nowrap;"> 
<tr><td>ERIC</td><td>DONNA</td></tr> 
<tr><td style="overflow: hidden;">This cell has a lot of text so that I can test for overflow issues even if I make my browser window very wide</td><td>&nbsp;</td></tr> 
<tr><td>&nbsp;</td><td>Whatever</td></tr> 
</table> 
</td> 
</tr> 
</table> 

小提琴：http://jsfiddle.net/fWFPm/4/

Answer 2

你的表寬度爲100％，並且在第二和第三列中的寬度各佔50％和你的第一列是0％。當然，它不起作用，因爲它已經用完了第二和第三列的100％寬度。