CODEWITHSUNDEEP
csscss-floatstylesheet
Tom Cruise
Tom Cruise

Reputation: 1425

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?

Upvotes: 0

Views: 89

Answers (2)

TimSPQR
TimSPQR

Reputation: 2984

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;
}

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 106008

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.

Upvotes: 2

Related Questions