16

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.

user544079
  • 16,109
  • 42
  • 115
  • 171
  • possible duplicate of [html table cell width for different rows](http://stackoverflow.com/questions/5938099/html-table-cell-width-for-different-rows) – oezi May 09 '11 at 14:28

3 Answers3

21

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>
clairesuzy
  • 27,296
  • 8
  • 54
  • 52
  • As mentioned by Till in the duplicate https://stackoverflow.com/questions/5938099/html-table-cell-width-for-different-rows I think this is against the initial idea of tables. – Simon Sep 22 '22 at 08:53
4

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

Feldmahler
  • 41
  • 1
0

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%;
    }
Anoop
  • 1