2

我正在尝试在移动网站设计中重新创建每日日程视图。PC版是这样的：

在此处输入图像描述

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

我希望第一列具有自动宽度，以适应内容，其余列相等（均匀分布）。整个表格将是 100% 宽度。

我可以通过如下设置列宽来得到这个：0; 50%；50%；- 并且不使用table-layout: fixed; 问题是，我不能因为内容太大而让任何单元格的宽度变宽。如果我使用table-layout: fixed，它将使单元格保持正确的大小，但第一列是 0 宽度，而不是自动/适合。我尝试将内容放在 span 或 div 中的每个单元格内，并将它们设置为: width: 100%; overflow: hidden;，但我不认为 width: 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”的长文本会换行成多行。如果我将其更改为不换行，则单元格会变得太宽（即使溢出：隐藏）。

4

2 回答 2

3

您的表格宽度为 100%，第二列和第三列的宽度各为 50%，您的第一列为 0%。当然，它不起作用，因为它已经用完了第二列和第三列的 100% 宽度。

于 2013-08-28T04:33:08.693 回答
0

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

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

于 2013-08-28T16:44:36.600 回答