title: 3 column table, widths: auto, 50%, 50%, overflow hidden
body: <p>I'm trying to recreate a daily schedule view in a mobile website design.  The PC version looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/uyJeK.png" alt="enter image description here"></p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>I can get this by setting the column widths as follows: 0; 50%; 50%;  -- and not using <code>table-layout: fixed;</code>  The problem is, I can't have the width of any cells getting wider just because the content is too large.  If I use <code>table-layout: fixed</code>, 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: <code>width: 100%; overflow: hidden;</code>, but I don't think the width: 100% really works inside a table that isn't fixed.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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):</p>
  
  <pre><code>&lt;table cellpadding="0" cellspacing="0" style="width: 100%; xwhite-space: nowrap; xtable-layout: fixed;"&gt;
      &lt;tr&gt;
      &lt;td style="width: 0; background-color: Lime;"&gt;
      Time
      &lt;/td&gt;
      &lt;td style="width: 50%; background-color: Silver;"&gt;
      ERIC
      &lt;/td&gt;
      &lt;td style="width: 50%; background-color: Gray;"&gt;
      DONNA
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;8:00am&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;Do Something&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;9:00am&lt;/td&gt;&lt;td style="width: 50%; overflow: hidden;"&gt;&lt;div style="width: 100%; height: 100%; overflow: hidden;"&gt;Do Something else with more text so we can see how this works when too long and really longer than it ever should be&lt;/div&gt;&lt;/td&gt;&lt;td style="width: 50%;"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>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).</p>