我想创建一个如下所示的表:
+-----------------------------------------------------------+
|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:20px)
渲染在 FF8 中是正确的。有什么想法可以让 IE 以我想要的方式呈现表格吗？
最佳答案
我忘记了表格的样式为“表格布局:固定”，这造成了困难。设置此样式后，第一行中单元格的宽度将应用于所有后续行。由于第一行包含一个 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>
关于html - 一行中单元格上的 Colspan 似乎阻止在所有其他行中设置 TD 宽度。为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8835756/