HTML Tables: fixed and dynamic widths

Question

I have a table something like this:

<table>
    <tr>
        <td id='col1' style='width:120px;'>
            Content here...
        </td>
        <td id='col2' style='width:30px;'>
            Content here...
        </td>
        <td id='col3' style='width:35px;'>
            Content here...
        </td>
    </tr>
</table>

Now, I want col1 to be fixed at a width of 120px. However col2 and col3 should have a dynamic width of the remaining table space. In relation to each other 30% and 35% respectively. (That is if col2 is 300px then col3 should be 320px.)

Are you using tables for layout purposes or for data representation? — AlanFoster
– AlanFoster, Commented Jun 26, 2011 at 17:25
Yeah, unless this is just a list to show bits of data in a simple way, don't use tables. — alt
– alt, Commented Jun 26, 2011 at 17:27
if the remanining take up all space. the col2 take 30%, col3 take 35%, what do you do with the last 35%? — bingjie2680
– bingjie2680, Commented Jun 26, 2011 at 17:37
No, it musn't be 30 and 35% of the table it must be 30 and 35% in relation to each other. — Chaim
– Chaim, Commented Jun 26, 2011 at 18:12

Chris Baxter · Accepted Answer · 2011-06-26 18:34:22Z

4

I assume that there is a fourth column somewhere to take up the remaining space? Regardless, you can adapt the following if not...

<table width="800"> <!-- or <table width="50%"> or <table style="width:800px"> etc -->
 <colgroup>
   <col width="120" />
   <col width="30%" />
   <col width="35%" />
   <col />
 </colgroup>
  <tbody>
    <tr> 
      <td>Col 1</td>
      <td>Col 2</td>
      <td>Col 3</td>
      <td>Col 4</td>
    </tr>
  </tbody>
</table>

The first column is fixed at 120 pixels; the second and third columns are 30% and 35% respectively, with any remaning space being allocated to the fourth dynamically sized column.

edited Jun 26, 2011 at 18:34

answered Jun 26, 2011 at 17:34

Chris Baxter

16.4k9 gold badges54 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

bingjie2680 Over a year ago

this does not work. see here...jsfiddle.net/bingjie2680/tCdEz try to enlarge the right frame, it doest take up the rest

Chris Baxter Over a year ago

@bingjie - Did you give the table an explicit width? If you don't provide a table width (i.e., style="width:100%"), then the table is sized to its contents, and the col widths are effectively ignored.

Chris Baxter Over a year ago

@Chaim - What determines your table size? Solely the content? Does the content change once loaded? Can you use jQuery to resize the table as required? Need more info about what exactly you are trying to accomplish. You can't ask the table to size a column by 30% if there isn't a fixed width to base that 30% off of.

Chaim Over a year ago

@Calagary Ok I guess I could put a % width.

Chaim Over a year ago

@Calgary, @bingjie2680: The jsfiddle example posted by bingjie2680 still doesn't seem to work even with adding a style='width:100%'

|

Stuart Burrows · Accepted Answer · 2011-06-26 17:34:40Z

2

Have you tried using table-layout:fixed? Not 100% on this but here is a quick mock that seems to work: http://jsfiddle.net/pm6pt/

answered Jun 26, 2011 at 17:34

Stuart Burrows

10.8k2 gold badges36 silver badges33 bronze badges

Collectives™ on Stack Overflow

HTML Tables: fixed and dynamic widths

2 Answers 2

12 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related