Giving HTML table cell priority over other cells

Question

I have a pretty simple table:

<table cellspacing=0 cellpading=0 border=0>
  <tr>
     <td width="50%">Here is column 1</td>
     <td width="50%">Here is column 2</td>
  </tr>
</table>

Is there any way to have column 2 reduce width before column 1 does? I'd like column 1 to stay as close to 50% as possible if the screen width becomes reduced. If there is no further room for column 2 to collapse, however, then it is ok for column 1 to shrink.

I don't want to apply "white-space: nowrap" to column 1, apply a fixed with, or use javascript. Is there any CSS solution?

Answer 1

You have to give specific (non percentage) width to the first column (initial width can be calculated based on initial window size).

E.g.

HTML

<table cellspacing="0" cellpading="0" border="0">
  <tr>
     <td>Here is column 1</td>
     <td>Here is column 2</td>
  </tr>
</table>

CSS

table {
    font-size:40px
}

tr > td:first-child {
    width:280px;
}

DEMO

http://jsfiddle.net/hyrvn/1/

Try resizing bottom-right window to the right.