html - 3列表，宽度: auto, 50%、50%，溢出隐藏

Question

我正在尝试在移动网站设计中重新创建每日日程 View 。 PC 版本如下所示:

它将有几行，最多 5 或 6 列。我认为表格是最好的，但找不到正确的 CSS/HTML 来让它按照我想要的方式工作。

我希望第一列具有自动宽度，以适合内容，其余部分相等(均匀分布)。整个表格的宽度将为 100%。

我可以通过如下设置列宽来得到这个:0; 50%； 50%； -- 并且不使用 table-layout:fixed; 问题是，我不能仅仅因为内容太大而使任何单元格的宽度变宽。如果我使用table-layout:fixed，它会使单元格保持正确的大小，但第一列的宽度为0，而不是自动/适合。我尝试将内容放在 span 或 div 中的每个单元格内，并将它们设置为: width: 100%; Overflow:hidden;，但我不认为 width:100% 在不固定的表格中真正起作用。

如果我真的必须这样做，我将为第一列设置固定宽度，但我想避免这种情况，因为我不想使用固定字体大小 - 特别是因为这将是一个移动网站，适用于智能手机和平板电脑。

我也许可以通过使用嵌套表或 float 来做一些事情...第一列不属于同一个表，但我希望有一个我缺少的 super 干净的解决方案，并且我可以保留所有这些都在一个表中。

编辑:根据要求，这是我尝试过的代码的一个版本。名称前面带有 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% 宽度。