Question

请参见下面的html：

      <table style="width: 700px;table-layout: fixed ; margin-top: 30px;" cellpadding="0" cellspacing="0">
        <tr class="tableHeader">
          <td width="220px">Event Name</td>

          <td width="120px">City</td>
          <td width="77px">Date</td>
          <td width="110px">Price</td>
          <td width="80px">Status</td>
          <td width="60px">Select</td>
        </tr>
    </table>

    <div style="overflow: auto;height: 360px; width: 730px;">
        <table style='width: 700px;table-layout: fixed;' cellpadding='0' cellspacing='0'>
                <tr >
                    <td colspan='6' >adnanpo </td>
                </tr>
                <tr >
                    <td width='220px' >adnanpo </td>
                    <td width='120px' > </td>
                    <td width='77px' >04/20/2012 </td>
                    <td width='110px' >USD $30.00 </td>
                    <td width='80px' >Paid </td>
                    <td width='60px' >
                        <input class='orgOkButton' type='button' id='btnOpenOrder' name='btnOpenOrder' onclick='return openOrderWindow('/RealResource/submitorder.aspx?OId=35731&EvtId=771')</td> 
                </tr>
            </table>
        </div>

以下部分导致问题：

                <tr >
                    <td colspan='6' >adnanpo </td>
                </tr>

enter image description here

请看图像，列宽受到干扰!!请帮我解决一下！

Answer 1

显而易见的解决方案是删除导致问题的tr元素。它似乎没有这里的功能。如果您只想在那里放置一些spacer，请在两个表之间放置一个div元素。

问题出现是因为table-layout: fixed告诉浏览器根据第一个行确定列宽，如果没有以某些其他方式设置宽度。这里第一行只有一个跨越所有列的单元格，然后定义的行为是在列之间平均分配宽度。

或者，明确设置列宽，例如使用

    <col width=220>
    <col width=120>

等。在每个<table>标记之后。但请确保宽度的总和加起来设置为表的总宽度（它们当前没有）。当使用col元素来设置所有列宽时，浏览器将使用这些精确的宽度而不会产生疑问（这可能会导致问题，但我认为您已经考虑过它们了。）

Answer 2

删除第二个表中的'table-layout'属性，它可以正常工作。并关闭输入元素（onclick="return openOrderWindow('/RealResource/submitorder.aspx?OId=35731&EvtId=771')"/>）

Answer 3

如果我理解正确，您会担心您的列未对齐到顶部。

首先我建议您使用以下CSS：

table { empty-cells: show; }

这将允许您必须填充空格的空单元格。（否则你可以在它的空白处放一个 。）

另外，如果可以的话，我建议您使用一个连续表。

Answer 4

关闭输入标记 - ＆gt;不见了。如果问题仍然存在，我们可以进一步了解。

Answer 5

是的，在表格的“第一行”中使用colspan就是这种情况。为了解决这个问题，你可以做类似的事情（再次只是第一行 - 你可以进一步使用colspan罚款）：

                <tr>
                    <td width="220px"><div style="position:absolute;width:220px;">adnanpo</div></td>
                    <td width="120px"></td>
                    <td width="77px"></td>
                    <td width="110px"></td>
                    <td width="80px"></td>
                    <td width="60px"></td> 
                </tr>

Colspan令人不安的桌面布局

5 个答案: