CODEWITHSUNDEEP
htmlcsshtml-table
Royi Namir
Royi Namir

Reputation: 148744

Html Table with 100% width but with growing TD?

I have a table which its width is 100%;

I have 2 TDs.

enter image description here

However I want the second td to be near to the left end. ( right after the ccccccc...)

There is a solution which uses 1 more td which its width is 100%.

Something like

<table id="mytable"style="width:100%;background:red"><tr>
    <td>TEXT1</td>
    <td>TEXT2</td>
    <td style="width:100%;background:blue">&nbsp;</td>
    </tr></table>

But , I was wondering if there's another solution without another TD ?

Upvotes: 3

Views: 7389

Answers (4)

Milche Patern
Milche Patern

Reputation: 20492

CSS

tr td:not(:first-of-type){
    width:100%
}

or

tr td{
    width:100%
}
tr td:first-child{
    width:1%
}

Upvotes: 2

Zoka
Zoka

Reputation: 2352

http://jsfiddle.net/rjsAG/

Just do not add the last TD but use width:100% for the second one

Upvotes: 1

Mike
Mike

Reputation: 1175

Try this: http://jsfiddle.net/Rrkky/144/ Does exactly what you're asking for.

HTML

<table id="mytable"style="width:100%;background:red">
    <tr>
    <td class="firstcell">aaaa</td>
    <td>TEXT2</td>
    </tr>
    <tr>
    <td class="firstcell">bbbbbbb</td>
    <td>TEXT2</td>
    </tr>
    <tr>
    <td class="firstcell">ccccccccccccccc</td>
    <td>TEXT2</td>
    </tr>
</table>

CSS

#mytable td {
    width:50px;
    background:green
}

#mytable td.firstcell {
    background:red;
    width:1%;
}

Upvotes: 4

HamZa
HamZa

Reputation: 14931

What about this ?

<table id="mytable"style="width:100%;background:red">
    <tr>
        <td>aaa</td>
        <td width="100%">Royi</td>
    </tr>
    <tr>
        <td>bbbbbb</td>
        <td width="100%">Royi</td>
    </tr>
    <tr>
        <td>cccccccccccccccc</td>
        <td width="100%">Royi</td>
    </tr>
</table>

Upvotes: 3

Related Questions