我想创建一个如下所示的表:
+-----------------------------------------------------------+
|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以我想要的方式呈现表格？
pau*_*aul 22
我忘记了桌子的风格'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>
小智 7
如本答案中所示,您可以通过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>
这是一个小提琴