views:

169

answers:

2
<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?

Thanks in advance for your help.

+2  A: 
<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;
}
Scharrels
Does this work cross-browser, especially IE6? Thanks!
Nimbuz
A: 

Okay, figured it:

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

I don't know yet if it works cross-browser.

Nimbuz
In most browsers, a table without a width will get the minimum width it needs to fill the content. It will look the same in most modern browsers when you till the table to have a width relative to the containing element: <table width="100%">
Scharrels