Question

<table>
  <tr>
     <td>Fixed-Width Column: 250px</td>
     <td>Fluid Width Column: remaining width</td>
  </tr>
</table>

I’m not creating a page layout with this, and I need to use Table. Is there any way to achieve this cross-browser? I’m already using jQuery on this project, if that helps?

Answer 1

<table width="100%">
  <tr>
     <td width="250">Fixed-Width Column: 250px</td>
     <td width="*">Fluid Width Column: remaining width</td>
  </tr>
</table>

Alternatively, you can put the style information in your css. The HTML for this looks like:

<table class="styletable">
  <tr>
     <td class="navigation">Fixed-Width Column: 250px</td>
     <td class="maincontent">Fluid Width Column: remaining width</td>
  </tr>
</table>

The CSS will be:

.styletable {
    width: 100%;
}

.navigation {
    width: 250px;
}

The maincontent will automatically get the remaining width.

You can achieve the same result with a <div> based layout. The html:

<div>
     <div class="navigation">Fixed-Width Column: 250px</div>
     <div class="maincontent">Fluid Width Column: remaining width</div>
</div>

and CSS:

.navigation {
    width: 250px;
    float: left;
}

.maincontent {
    margin-left: 260px;
}