paul paul - 3 years ago 223
HTML Question

Colspan on cell in one row seems to prevent setting TD width in all the other rows. Why?

I want to create a table which look like this:

+-----------------------------------------------------------+
|January 12th, 2012 |
+-----------------------------------------------------------+
| x | first item | second item |
+-----------------------------------------------------------+
| x | first item | second item |
+-----------------------------------------------------------+
|January 13th, 2012 |
+-----------------------------------------------------------+
| x | first item | second item |
+-----------------------------------------------------------+
| x | first item | second item |
+-----------------------------------------------------------+


but what I get is this:

+-----------------------------------------------------------+
|January 12th, 2012 |
+-----------------------------------------------------------+
| x | first item | second item |
+-----------------------------------------------------------+
| x | first item | second item |
+-----------------------------------------------------------+
|January 13th, 2012 |
+-----------------------------------------------------------+
| x | first item | second item |
+-----------------------------------------------------------+
| x | first item | second item |
+-----------------------------------------------------------+


The 'x' is actually an image an has a fixed width. I want to force the first cell to only be as wide as the image.

Here is a sample:

<html>
<body>
<table>
<tbody>
<tr>
<td colspan="3">January 12th 2011 this here is just for padding to make table wider</td>
</tr>
<tr>
<td width="20"> x </td>
<td>First item</td>
<td>Second item</td>
</tr>
</tbody>
</table>
</body>
</html>


It seems that the row containing the TD with colspan=3 is causing the TD in the other rows to ignore the width attribute (I also tried using style width:20px)

The rendering is correct in FF8. Any ideas how do I get IE to render the table in the way I want?

Answer Source

I had forgotten that the table has the style 'table-layout: fixed' and this was causing the difficulty. When this style is set the widths of the cells in the first row are applied to all following rows. As the first row contained a colspan I guess IE got confused (FF handles it ok).

Any way it's not as flexible as I wanted but this worked for me.

<html>
  <body>
  <div style="width:350px; border:blue 1px solid">
    <table border="0" style="font-family:Arial,Helvetica;font-size:10pt;table-layout:fixed;">
      <tr>
        <td style="width:17px;"/>
        <td style="width:20px;"/>
        <td style="width:180px;"/>
        <td style="width:130px;"/>
      </tr>
      <tr>
        <td colspan="4" style="width:100%;text-align:center;font-eight:bold;background-color:#eef;">09 January 2012</td>
      </tr>
      <tr title="09 January 2012">
        <td align="center" valign="middle" colspan="1" style="width:17px;height:1.1em;"><img src="../../../../_layouts/images/WebParts2010/AWT3_Klein.png" style="border-style:None;border-width:0px;height:1.1em;width:1.1em;" /></td>
        <td align="left" valign="top" colspan="1" style="width:20px;height:1.1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">LO</td>
        <td align="left" valign="top" colspan="1" style="width:180px;height:1.1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Customer Name Ltd.</td>
        <td align="left" valign="top" colspan="1" style="width:120px;height:1.1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Reason for visiting today</td>
      </tr>
    </table>
  </div>
</body>
</html>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download