一行中的单元格上的 Colspan 似乎阻止在所有其他行中设置 TD 宽度.为什么? [英] Colspan on cell in one row seems to prevent setting TD width in all the other rows. Why?

问题描述

我想创建一个看起来像这样的表:

+-----------------------------------------------------------+|2012 年 1 月 12 日 |+-----------------------------------------------------------+|× |第一项 |第二项 |+-----------------------------------------------------------+|× |第一项 |第二项 |+-----------------------------------------------------------+|2012 年 1 月 13 日 |+-----------------------------------------------------------+|× |第一项 |第二项 |+-----------------------------------------------------------+|× |第一项 |第二项 |+-----------------------------------------------------------+

但我得到的是:

+-----------------------------------------------------------+|2012 年 1 月 12 日 |+-----------------------------------------------------------+|× |第一项 |第二项 |+-----------------------------------------------------------+|× |第一项 |第二项 |+-----------------------------------------------------------+|2012 年 1 月 13 日 |+-----------------------------------------------------------+|× |第一项 |第二项 |+-----------------------------------------------------------+|× |第一项 |第二项 |+-----------------------------------------------------------+

x"实际上是一个具有固定宽度的图像.我想强制第一个单元格仅与图像一样宽.

这是一个示例:

<身体><表格><tr><td colspan="3">2011 年 1 月 12 日，这里仅用于填充以使表格更宽</td></tr><tr><td width="20">x</td><td>第一项</td><td>第二项</td></tr></tbody>

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

渲染在 FF8 中是正确的.任何想法如何让 IE 以我想要的方式呈现表格?

解决方案

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

无论如何它都没有我想要的那么灵活，但这对我有用.

<身体><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;">2012 年 1 月 9 日</td></tr><tr title="2012 年 1 月 9 日"><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;">客户Name Ltd.</td><td align="left" valign="top" colspan="1" style="width:120px;height:1.1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">原因用于今天访问</tr>

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?

解决方案

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>

这篇关于一行中的单元格上的 Colspan 似乎阻止在所有其他行中设置 TD 宽度.为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！