一行单元格上的Colspan似乎阻止在所有其他行设置TD宽度.为什么?



我想创建一个如下所示的表:

+-----------------------------------------------------------+
|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"实际上是一个具有固定宽度的图像。我想强制第一个单元格只能和图像一样宽。

这是一个示例:

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

似乎包含colspan=3的TD的行导致其他行中的TD忽略width属性(我也尝试过使用样式width:20px)

FF8中的渲染是正确的。有什么想法可以让IE以我想要的方式呈现表格吗?

我忘记了表的样式是"table layout:fixed",这导致了困难。设置此样式后,第一行中单元格的宽度将应用于后面的所有行。由于第一行包含一个colspan,我想IE很困惑(FF处理得很好)。

不管怎样,它并没有我想要的那么灵活,但这对我很有效。

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

如本答案所示,您可以通过colgroupcol设置整个表的属性。这样,即使对于第一行colspan中的(不可见的单个)单元格,也可以设置单独的属性。

在您的示例中,它将是:

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

这是一个小提琴

IE总是将表单元格的宽度视为最小宽度,至少在版本8之前是这样(不知道9)。

我找到的唯一方法是在所有表单元格上指定显式宽度,或者在加载后(但在显示之前)使用Javascript设置宽度。

我建议给这些单元格一个类,然后用进行样式

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

相关内容

最新更新