css3 - how to adjust width of first cell of a table using CSS -

css3 - how to adjust width of first cell of a table using CSS -

i have html construction shown below.

<style> .divcontainer { width:100% } .left_menu { background: none repeat scroll 0 0 #333333; border-radius: 5px 5px 5px 5px; font-family: arial,helvetica,sans-serif; font-size: 12px; font-weight: bold; padding: 5px; width: 200px; } </style> <div class="divcontainer"> <table width="100%"> <tr> <td valign="top"> <div class="left_menu"> 1 </div> </td> <td> <div> 2</div> </td> </tr> </table> </div>

i need create construction in image below

but dont want apply styles td. width of td should adjusted through classes applied kid div. in short first td should occupied 25% of tr , sec should occupy remaining 75%.can throw lite on how this?

you may set sec td hudge width. take max-width avalaible , first td shrink content. http://jsfiddle.net/f5q3e/

basicly here need set :

td { background:red; } td+td { width:100%; background:blue; }

first td adjust content , sized div if , sec td utilize remaining space.

css css3 css-float stylesheet