可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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?

回答1:

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>

回答2:

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

回答3:

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).

回答4:

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

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

文章来源: Colspan on cell in one row seems to prevent setting TD width in all the other rows. Why?

标签

cell

table