CODEWITHSUNDEEP
htmlcss
user544079
user544079

Reputation: 16629

table cell width issue

I have a table with 2 rows where i need varying cell width as 

<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
    <tr>
        <td width="25%">25</td>
        <td width="50%">50</td>
        <td width="25%">25</td>
    </tr>
    <tr>
        <td width="50%">50</td>
        <td width="30%">30</td>
        <td width="20%">20</td>
    </tr>
</table>
</body>

I cannot get the width as specified the second row also gets the width of the first row.

Upvotes: 16

Views: 12038

Answers (3)

Anoop
Anoop

Reputation: 1

You can use nth:child

However it will apply to all rows. This will be relative and not absolute. 

    tr>:nth-child(6){ 
    width: 20%;
    }
    tr>:nth-child(7){ 
    width: 80%;
    }

Upvotes: 0

Feldmahler
Feldmahler

Reputation: 51

Actually, you can just have each tr set to display:block, and it will allow you to set different column widths for each row.

Upvotes: 5

clairesuzy
clairesuzy

Reputation: 27624

to do this with one table you need to introduce more columns and then get the column widths by using colspan so you can get the combined widths you require

to get this to work well across browser you will possibly need to use the <col> and <colgroup> elements : http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4

<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
<colgroup>
<col width="25%">
<col width="25%">
<col width="25%">
<col width="5%">
<col width="20%">
</colgroup>

    <tr>
        <td>25</td>
        <td colspan="2">50</td>
        <td colspan="2">25</td>     
    </tr>
    <tr>
        <td colspan="2">50</td>
        <td colspan="2">30</td>
        <td>20</td>
    </tr>
</table>
</body>

Upvotes: 21

Related Questions