views:

380

answers:

1

I have a HTML table where I:

  1. Include explicit table width.
  2. Include explicit width on the first <td> row.
  3. I have images in the columns but I include height and width tags on the images so the browser should know in advance the sizing.
  4. Using

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
     <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    

This works fine in Internet Explorer 8, Firefox and Chrome.

Internet Explorer 7 doesn't seem to follow the col width specified as one column I have set as much larger than the other but it shows up the same size as the others.

What am I missing?

Here is some of the table HMTL and CSS:

CSS

 #mainApplicationsTable
 {
    table-layout:fixed;
 }

HTML:

<table border='0' class='altTable' width='320px' id='mainApplicationsTable'>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr class='odd' recnum='51'>
  <td width='190px'><div class='appDetailsClic'k id='51' >2</div></td>
  <td width='30px'><img width='16px' height='16px' title= 'a' border='0'  src="../../images/image.png"></td> 
  <td width='30px'><img width='16px' height='16px' title= 'Server' border='0' src="../../images/2.png"></td>
  <td width='30px'><img width='16px' height='16px' title= 'Server' border='0' src="../../images/2.png"></td>
  </tr>
 </tbody>
    </table>
+4  A: 

You haven't included explicit widths in your first row. The first row is actually the one containing the <th> elements. Since they don't have widths, the fixed layout algorithm gives them all the same width. Move the width declarations to that row, or to some <col> elements at the front.

You're also going to have trouble because the given widths don't add up to 320. Incidentally, width="320px" is invalid; there is no unit in HTML measurements, that's only available in CSS. Either use width="320", or, from a style, width: 320px;. The same goes for the image width/heights.

bobince