嵌套表中的 Colspan 样式设置失败答案

【问题标题】：Colspan styling in nested tables failed嵌套表中的 Colspan 样式设置失败
【发布时间】：2014-12-01 20:54:08
【问题描述】：

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

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

而不是像这样：

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

( - 仅定义为宽度而不是 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%">的表中

失败的原因是什么？

【问题讨论】：

标签： html css tablelayout

【解决方案1】：

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

【讨论】：

嘿，是的，在我的标记中我忘记了空格 td。我已经编辑了我的标记，所以现在是 6+2
你能准确地说出你的问题吗？只是比例问题？
是的，如果我在最后一个 td 上执行 colspan=2，它将看起来像屏幕截图中的样子。如果我只设置一个 td 没有 colspan=2 一切看起来都是预期的，除了这个没有 colspan 的 td。我不知道为什么。
在您的屏幕截图上，我注意到您的最后一行有一个非常宽的输入，可能由一个 td 包裹，其 colspan 为 5 或 6 ！！！所以不能通过js对这个应用colspan="2"
是的，在我的最后一行中，最后一个 td（只有 3 个）的 colspan 为 6。我没有用 js 设置 colspan，我用 php 设置。

【解决方案2】：

我已经解决了这个问题。在我的第一行中，colspan=7 的第一个 td 不需要宽度 =“100%”。现在它的功能。

【讨论】：