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

标签 html css tablelayout

我对嵌套表格有疑问。在我的公司,我们有一个基于表格布局的旧网站。我想在一个 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%">

This is what it looks like

什么失败了?

最佳答案

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

关于html - 嵌套表中的 Colspan 样式失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27225569/

相关文章:

javascript - 从 JavaScript 控制视频背景

Javascript 嵌入脚本 onclick

javascript - 将 Ionic 标签从 ts 文件附加到 html

html - Bootstrap 图像网格对齐

jquery - 由于目标被视为被动,无法阻止被动事件监听器中的默认设置?为什么滚动时出现此错误?

java - 为什么 Libgdx 的表不接受缩放操作?

android - 无法将垂直分隔线添加到 TableLayout Android

html - 如何使用 css 和 html 排序产生从 1.1、1.2、1.3(而不仅仅是 1、2、3)开始的结果的列表

python - 使用自定义信息填写日历

android - 在 TableLayout 中以编程方式设置列数