Question

通过适当使用rowspan和colspan，可以在HTML表格中复制Excel中合并和未合并单元格的任意排列，还是有限制？我已经解决了一些相当复杂的安排，所以我很有希望。

我有一个8行5列的网格，它被合并到16个不同的单元格中，代表8个部分的标题和内容，标记为A-H。

这是我想要实现的安排，因为它在Excel中看起来（单元格B2：F9）： enter image description here

以下是我对HTML范围进行概念化的方法：

layout

以下标记是我的最佳近似值：请注意，红色div用于表示某个部分内容的任意大小。

<style>
    table {
        border-spacing: 0;
        width: 1500px;
    }

        table > tbody > tr > td {
            border: 1px solid black;
            vertical-align: top;
            text-align: center;
        }

            table > tbody > tr > td > div {
                margin: 0 auto;
                border: 1px red solid;
            }
</style>
<table>
    <tr id="Row1">
        <td>A
        </td>
        <td colspan="2">B
        </td>
        <td colspan="2">C
        </td>
    </tr>
    <tr id="Row2">
        <td>
            <div style="width: 340px; height: 100px;" />
        </td>
        <td colspan="2" rowspan="3">
            <div style="width: 450px; height: 200px" />
        </td>
        <td colspan="2" rowspan="5">
            <div style="width: 400px; height: 100px" />
        </td>
    </tr>
    <tr id="Row3">
        <td>D
        </td>
    </tr>
    <tr id="Row4">
        <td rowspan="5">
            <div style="width: 340px; height: 100px;" />
        </td>
    </tr>
    <tr id="Row5">
        <td colspan="2">E
        </td>
    </tr>
    <tr id="Row6">
        <td colspan="2">
            <div style="width: 450px; height: 200px;" />
        </td>
    </tr>
    <tr id="Row7">
        <td>F
        </td>
        <td colspan="2">G
        </td>
        <td>H
        </td>
    </tr>
    <tr id="Row8">
        <td>
            <div style="width: 330px; height: 100px" />
        </td>
        <td valign="top" colspan="2">
            <div style="width: 200px; height: 100px" />
        </td>
        <td valign="top">
            <div style="width: 200px; height: 100px" />
        </td>
    </tr>
</table>

它产生了这个： enter image description here

我的解决方案有两个问题：

标题的下边缘＆＃39; D＆＃39; （第3行）似乎与上边缘相关联标题＆＃39; E＆＃39; （第5行）和标题＆＃39; D＆＃39;太高了。相反，我认为A＆＃39; A＆＃39;应缩小以适应div，绘制标题＆＃39; D＆＃39;起来。
我无法解释为什么超过一半的细胞（B，C，E，F，H）太宽内容。这张桌子的结尾比我需要的要宽得多 - 我希望更多的细胞能够像G一样适应它们的内容。

渲染在浏览器中是一致的。我的跨度是否犯了错误，或者由于某种原因这是不可能实现的？

Answer 1

现在，您正在让浏览器解释表格中每个单元格的宽度和高度。您需要为每个单元格设置宽度和高度属性以解决问题。

<table>
        <tr id="Row1">
            <td width="340">A
            </td>
            <td colspan="2" width="450">B
            </td>
            <td colspan="2" width="450">C
            </td>
        </tr>
        <tr id="Row2">
            <td width="340" height="100">
                <div style="width: 340px; height: 100px;" />
            </td>
            <td colspan="2" rowspan="3" width="450">
                <div style="width: 450px; height: 200px" />
            </td>
            <td colspan="2" rowspan="5" width="400">
                <div style="width: 400px; height: 100px" />
            </td>
        </tr>
        <tr id="Row3">
            <td>D
            </td>
        </tr>
        <tr id="Row4">
            <td rowspan="5" width="340">
                <div style="width: 340px; height: 100px;" />
            </td>
        </tr>
        <tr id="Row5">
            <td colspan="2" width="450">E
            </td>
        </tr>
        <tr id="Row6">
            <td colspan="2" width="450">
                <div style="width: 450px; height: 200px;" />
            </td>
        </tr>
        <tr id="Row7">
            <td>F
            </td>
            <td colspan="2">G
            </td>
            <td>H
            </td>
        </tr>
        <tr id="Row8">
            <td width="350">
                <div style="width: 350px; height: 100px" />
            </td>
            <td valign="top" colspan="2" width="200">
                <div style="width: 200px; height: 100px" />
            </td>
            <td valign="top" width="300">
                <div style="width: 300px; height: 100px" />
            </td>
        </tr>
    </table>

查看更新的fiddle。

Answer 2

html中的复杂表格程序这是html代码中的代码复杂表。

<style>

    table > tbody > tr > td {
        border: 5px solid black;
        vertical-align: top;
        text-align: cen`enter code here`ter;
        padding: 10px;
        
    }
    table{
        margin:  25px 50px 75px 100px;
        border: 5px rgb(20, 20, 20) solid;
    }
        #Row1{
        background-color:#7CFC00;
        }
        #Row2{
        background-color:#d6c564;
        }
        #Row3{
        background-color:red;
        }
        #Row4{
        background-color:#DAA520;
        }
        #Row5{
        background-color:#1E90FF;
        }
        #Row6{
        background-color:#f18973;
        }
        #Row7{
        background-color:#C0C0C0;
        }
        #Row8{
        background-color:gray;
        }
    
    </style>

<!DOCTYPE html>

<body>
    <table>
        <tr id="Row1">
            <td style="font-size:1vw"><b>Row1</b></td>
            <td>
            </td>
            <td colspan="2"><h1>Colmnspan="2"</h1>
            </td>
            <td colspan="2"><h1>Colmnspan="2"</h1>
            </td>
        </tr>
        <tr id="Row2">
            <td style="font-size:1vw"><b>Row2</b></td>
            <td>
                <div style="width: 340px; height: 100px;" />
            </td>
            <td colspan="2" rowspan="3"><h1>Rowspan="3" Columnspan="2"</h1>
                <div style="width: 450px; height: 200px" />
            </td>
            <td colspan="2" rowspan="5"><h1>RowSpan "5" Columnspan "2"</h1>
                <div style="width: 400px; height: 100px" />
            </td>
        </tr>
        <tr id="Row3">
            <td style="font-size:1vw"><b>Row3</b></td>
            <td>
                <div style="width: 20px; height: 40px;" />
            </td>
        </tr>
        <tr id="Row4">
            <td style="font-size:1vw"><b>Row4</b></td>
            <td rowspan="5"><h1>Rowspan ="5"</h1>
                <div style="width: 340px; height: 100px;" />
            </td>
        </tr>
        <tr id="Row5">
            <td style="font-size:1vw"><b>Row5</b></td>
            <td colspan="2"><h1>Colmnspan="2"</h1>
            </td>
        </tr>
        <tr id="Row6">
            <td style="font-size:1vw"><b>Row6</b></td>
            <td colspan="2"><h1>Colmnspan="2"</h1>
                <div style="width: 450px; height: 200px;" />
            </td>
        </tr>
        <tr id="Row7">
            <td style="font-size:1vw"><b>Row7</b></td>
            <td>
            </td>
            <td colspan="2"><h1>Colmnspan="2"</h1>
            </td>
            <td>
            </td>
        </tr>
        <tr id="Row8">
            <td style="font-size:1vw"><b>Row8</b></td>
            <td>
                <div style="width: 330px; height: 150px" />
            </td>
            <td valign="top" colspan="2">
                <div style="width: 200px; height: 100px" /><h1>Colmnspan="2"</h1>
            </td>
            <td valign="top">
                <div style="width: 200px; height: 100px" />
            </td>
        </tr>
    </table>
</body>
    </html>

复杂的表rowspan和colspan

2 个答案: