Search code examples
csscss-floatstylesheet

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

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 belowsample

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?

Solution

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