Make table content fit to width with table width: 100% set in css

Question

Sample table

<table>
    <tr>
        <td>Age</td>
        <td>12</td>
        <td>Gender</td>
        <td>Male</td>
        <td>Some long label</td>
        <td>Some long label value</td>
        ...
        ...
        could be more...
    </tr>
</table>

Without the width:100% content should fit to each column container but I would like to make the table expand across the whole page. Setting table width: 100% equally distributes the column. I would like to make each label (Labels: Age, Gender, Some long label) fit it's column container and the rest equally divided among themselves (Values: 12, Male, Some long label value).

I know setting <td width="5%">Age</td> or setting it in css should do the job but I think this is counter productive especially if you have to do that with a lot of columns.

Is there a way to accomplish this in css with lesser code, javascript or jquery maybe? Any hint or direction on how this can be done?

Note:

I've read this but I would like to avoid injecting width="%" inside html.

Answer 1

May be colgroup can help you out. Try this

The HTML is:

<table border = "1" cellspacing = "0" cellpadding = "0">
  <colgroup>
    <col>
    <col style="width:40%">
    <col>
    <col style="width:40%">
  </colgroup>
    <tr>
        <td>Age</td>
        <td>12</td>
        <td>Gender</td>
        <td>Male</td>
    </tr>
</table>