How can I force <TD> width to remain the same width no matter what happens to others

HTML & CSS
1

I’m using dreamweaver. The table definition is below. As you can see, I specifically set the column width. The problem I have is that when I add a graphic in the top row that has colspan=3, it changes the <td> width of the left <td>.

Any ideas how to FORCE it stay the same not matter what happens in other column?

<table width="500" border="1" cellpadding="3" cellspacing="0">
  <tr>
    <td colspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td width="85">&nbsp;</td>
    <td width="38">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
2

My table use is limited to tabular data, and this sounds like there might be some cross-browser inconsistencies at play as well, but I’ll try to come up with a few possible answers, one of which will hopefully do the trick for you across the board.

  1. Try explicitly stating the width of the third column.
  2. Make sure the width of the image in the spanned cell is not greater than the width of the table, taking into account yuour cellpadding.
  3. Consider moving the image into a <div> and placing it right above the table. IT should be easy enough to give the same visual effect you intend by going this route.
  4. If the image is purely decorative, consider setting it as a non-repeating background for the table and applying padding to the top of the table to make room for it.
  5. If the intention of the table is not to present tabular data, consider an alternative means to displaying its contents. If this is its purpose, nevermind, and carry on :slight_smile:

Hopefully one of the first three suggestions will fix the roblem for you - the last two are a bit more complicated if you’re not used to working with code. If you still can’t make this work, can you post a URL to the page in question? It’ll be much easier to diagnose the problem if we can see it in action.

HTH! :slight_smile:

3

You should set the table layout to fixed (table-layout: fixed) then in first row set the widths of cells explictly. On the cell that should resize dynamically set nothing. If you are using colspans in first row then you should specify widths using <COL> elements.

4