我想创建一个如下所示的表:
+-----------------------------------------------------------+
|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>
如本答案所示,您可以通过colgroup
和col
设置整个表的属性。这样,即使对于第一行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>