Question

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/

Answer 1

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.