Question

我想提出一个这样的表格:

+-----------------------------------------------------------+
|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              |
+-----------------------------------------------------------+

但我得到的是:

+-----------------------------------------------------------+
|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         |
+-----------------------------------------------------------+

X实际上是一种具有固定宽度的形象。我只想强迫第一细胞像像样大。

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

不管怎么说,它不像我所希望的那样灵活,而是为我工作。

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

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

以你为例:

<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

Answer 3

IE一贯将坐在桌子上的宽度作为母子处理,至少可达第8版(宽约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).

Answer 4

我建议给这些囚室一个班子,然后给他们一个风格。

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

友情链接