CODEWITHSUNDEEP
htmlhtml-table
paul
paul

Reputation: 13516

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?

Upvotes: 16

Views: 19027

Answers (4)

phils
phils

Reputation: 312

As found in this answer you can set attributes for the entire table via colgroup and col. That way you are able to set individual attributes even for the (invisible single) cells inside the colspan in the first row.

In your example it would be:

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

Here's a fiddle

Upvotes: 10

paul
paul

Reputation: 13516

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>

Upvotes: 23

Daniel Hunter
Daniel Hunter

Reputation: 2866

I would suggest giving those cells a class and then style with

<style>    
.td_class {width: 20px;}
</style>

Upvotes: -1

Mr Lister
Mr Lister

Reputation: 46569

IE always treats width on table cells as min-width, at least up to version 8 (don't know about 9).

The only way I have found around this is to either specify explicit widths on all the table cells, or to use Javascript to set the width after loading (but before displaying).

Upvotes: 0

Related Questions