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

Question

I have a html structure as 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 to create a structure as in the picture below
but i dont want to apply styles to TD. The width of td should be adjusted through the classes applied to the child div. In short my first td should occupied 25% of tr and the second should occupy the remaining 75%.Can anyone throw some light on how to do this?

Answer 1

You may set for second td a hudge width. It will then take max-width avalaible and first td will shrink to its content.
http://jsfiddle.net/f5q3E/
basicly here you need to set :
td {
background:red;
}
td+td {
width:100%;
background:blue;
}
First td will adjust to its content and sized div if any , second td will use remaining space.

Answer 2

There are so many ways to handle this - here is one - FIDDLE - and it's not better than any other approach.
I'm just a little confused about the coloring of your tds and the coloring of the divs that goes into them.
If you can tell us the goals of what you want to do maybe we can make some other suggestions, such as not using table for layout - divs? floated divs?
CSS
table tr td:nth-child(1) {
width: 25%;
background-color: red;
}
table tr td:nth-child(2) {
width: 75%;
background-color: blue;
color: white;
}