html - 嵌套表中的 Colspan 样式失败

Question

我对嵌套表格有疑问。在我的公司，我们有一个基于表格布局的旧网站。我想在一个 tr 中动态添加一个新的 td。如果设置了此 td，则在其他 tr 中，我将在最后一个 td 上设置 colspan=2。如果我这样做，我的 table 看起来像这样:

|----|-|--------|--|---|-|-|

|----|-|--------|--|---|-|-|

|----|-|--------|--|---|-|-|

而不是像这样:

|---|-|----|--|---|-|-----|

|---|-|----|--|---|-|-----|

|---|-|----|--|---|-|-----|

( - 仅定义为宽度而不是 colspan)

这是我的代码中的示例标记:

<table border="0" width="100%" cellspacing="0" cellpadding="1">
    <tbody>
        <!-- Headline tr -->
        <tr>
            <td width="100%" valign="middle" nowrap align="left" colspan="7"> 
                Titel 
            </td>
            <!-- New dynamic Field -->
            <td nowrap align="right"> 
                <img src="example.gif" width="15px" height="15px"/>               
            </td>
        </tr>
        <tr>
            <td nowrap align="left"> 
                Name
            </td>
            <td> 
                :
            </td>
            <td width="50%" align="left"> 
                <input readonly value="test" />
            </td>
            <td > 
                <img src="blank.gif" />
            </td>
            <td nowrap align="left"> 
                Number
            </td>
            <td> 
                :
            </td>
            <td width="100%" align="left" colspan="2"> 
                <input readonly value="test" />
            </td>
        </tr>
        <tr>
            <td nowrap align="left"> 
                Name
            </td>
            <td> 
                :
            </td>
            <td width="50%" align="left"> 
                <input readonly value="test" />
            </td>
            <td > 
                <img src="blank.gif" />
            </td>
            <td nowrap align="left"> 
                Number
            </td>
            <td> 
                :
            </td>
            <td width="100%" align="left" colspan="2"> 
                <input readonly value="test" />
            </td>
        </tr>
        <tr>
            <td nowrap align="left"> 
                Name
            </td>
            <td> 
                :
            </td>
            <td width="50%" align="left"> 
                <input readonly value="test" />
            </td>
            <td > 
                <img src="blank.gif" />
            </td>
            <td nowrap align="left"> 
                Number
            </td>
            <td> 
                :
            </td>
            <td width="100%" align="left" colspan="2"> 
                <input readonly value="test" />
            </td>
        </tr>
    </tbody>
</table>

此表嵌套在一个表中 <table width="100%" height="100%">

什么失败了？

Answer 1

您不能在同一个父表的行 (tr) 中有不同数量的 td。在您的示例中，第一行有 8 (7+1) td，其他两行只有 7 (5+2)。它可能会破坏您的 table ..