3 column table, widths: auto, 50%, 50%, overflow hidden

Question

I'm trying to recreate a daily schedule view in a mobile website design. The PC version looks like this:

It will have several rows, and up to 5 or 6 columns. I think a table will be best, but can't find the right CSS/HTML to get this to work how I want.

I want the first column to have an auto width, to fit the content, and the rest to be equal (evenly distributed). The entire table will be 100% width.

I can get this by setting the column widths as follows: 0; 50%; 50%; -- and not using table-layout: fixed; The problem is, I can't have the width of any cells getting wider just because the content is too large. If I use table-layout: fixed, it keeps the cells the correct size, but the first column is 0 width, instead of auto/fit. I tried placing the content inside each cell in a span or div and setting those to: width: 100%; overflow: hidden;, but I don't think the width: 100% really works inside a table that isn't fixed.

If I really have to, I'll set a fixed width for the first column, but I'd like to avoid this because I don't want to use fixed font sizes -- especially because this will be a mobile website, for smart-phones and tablets.

I might be able to do something by using nested tables or floats... the first column not being part of the same table, but I'm hoping there is a super clean solution I'm missing, and I can keep all of this in a single table.

EDIT: As requested, here is one version of my code that I have tried. The styles with x in front of the names are just different things I have tried (I add the x to quickly remove, and easily put back):

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

The above version is as close as I've got, but the long text for "ERIC" at 9am wraps to multiple lines. If I change it to not wrap, then the cell gets too wide (even with overflow: hidden).

Solution 1

In case it isn't possible to do what I want with one table, here is a nested table solution that doesn't seem as bad as I thought:

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

Fiddle: http://jsfiddle.net/fWFPm/4/

Solution 2

Your table width is 100% and the second and third columns are width 50% each and your first column is 0%. Definitely, it doesn't work because it has already used up the 100% width for the second and third columns.

Comments

[simon]

doesn't look like you've understood the question -- the OP is fairly clear about what s/he wants.