Home/ Questions/Q 7043439
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T02:17:23+00:00

I want to create a table which look like this: +———————————————————–+ |January 12th, 2012

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0