CODEWITHSUNDEEP
htmlcsshtml-table
Senseful
Senseful

Reputation: 91681

Resizing columns proportionally in an HTML table

I have an HTML table:

<table style="width: 398px;">
  <tbody>
  <tr>
    <th style="width: 40px">A</th>
    <th>Col B</th>
    <th>A longer column</th>
    <th>D</th>
  </tr>
  </tbody>
<table>

The first column is set to a fixed width. I want the other three columns to use up all of the remaining space equally.

Is there any way to do this without specifying the pixel width for each column?

You can see that the last three columns do not use the same width: http://jsfiddle.net/ztyku/4/

Upvotes: 0

Views: 12652

Answers (2)

jeremysawesome
jeremysawesome

Reputation: 7254

Are you not wanting to use pixel widths or are you not wanting to use any widths? Percent based widths usually will work in this situation.

<table style="width: 398px;" border=1>
  <tbody>
  <tr>
    <th style="width: 10%;">A</th>
    <th style="width: 30%;">Col B</th>
    <th style="width: 30%;">A longer column</th>
    <th style="width: 30%;">D</th>
  </tr>
  </tbody>
<table>

Coincidentally, 10% of your table width of 398px is about 40px; which is your desired width.

Upvotes: 1

treeface
treeface

Reputation: 13341

Are you sure? What browser is this happening in? This is from your html:

http://jsfiddle.net/ztyku/

Edit: I just tried this in the major (modern) browsers and it works. Incidentally, why are you putting <th> tags inside the <tbody>?

Upvotes: 4

Related Questions