3列表，宽度：自动，50％，50％，溢出隐藏

Question

我正在尝试在移动网站设计中重新创建每日日程安排视图。 PC版看起来像这样：

它有几行，最多5或6列。我认为一张桌子是最好的，但找不到合适的CSS / HTML来让我的工作方式如此。

我希望第一列具有自动宽度，以适应内容，其余部分相等（均匀分布）。整个桌子的宽度为100％。

我可以通过设置列宽如下来得到这个：0; 50％; 50％; - 而不是使用table-layout: fixed;问题是，由于内容太大，我不能让任何单元格的宽度变宽。如果我使用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

您的桌子宽度为100％，第二列和第三列各宽度为50％，第一列为0％。当然，它不起作用，因为它已经用尽了第二列和第三列的100％宽度。

Answer 2

如果无法用一个表做我想做的事情，这里有一个嵌套的表解决方案，看起来并不像我想的那样糟糕：

<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/