html - Colspan 扰乱了表格布局

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>

请看图，列宽打乱!!请帮我修复它!

Answer 1

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

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

或者，显式设置列宽，例如使用

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

等在每个 <table> 之后标签。但要确保宽度的总和等于您设置为表格总宽度的数字(他们目前没有)。当col元素以这种方式设置所有列宽，浏览器将毫无疑问地使用那些确切的宽度(这可能会导致问题，但我假设您已经考虑过它们)。