简体   繁体   English

HTML表中的rowpan和colspan问题

[英]Issue with rowspan and colspan in HTML tables

I am trying to create this layout with tables in HTML using rowspan and colspan but the size of a cell is not showing how I expected, the value of rowspan and colspan of the cell "X" are "2" but the tables are created like it where 2x1. 我正在尝试使用rowspan和colspan在HTML中使用表创建此布局,但是单元格的大小未显示我的预期,单元格“ X”的rowspan和colspan的值为“ 2”,但是表的创建方式它在2x1。

Here is my code 这是我的代码

<html>
<head>
</head>
<body>
    <table border="3" cellspacing="5" cellpadding="3">
        <tbody>
            <tr>
                <td rowspan="2">1</td>
                <td>2</td>
                <td rowspan="2" colspan="2">X</td>
            </tr>

            <tr>    
                <td>3</td>      
            </tr>

            <tr>
                <td rowspan="1" colspan="4">4</td>  
            </tr>

            <tr>
                <td colspan="3">5</td>
                <td>6</td>  
            </tr>

        </tbody>
    </table>
</body>

This is working properly. 这工作正常。 It's easiest to see if you add a row that has all four cells occupying a single column: 最简单的方法是查看是否添加了一行所有四个单元格都占据一行的行:

<tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
</tr>

http://jsfiddle.net/ExplosionPIlls/HfHBU/ http://jsfiddle.net/ExplosionPIlls/HfHBU/

You're facing a visual problem caused by the there is no third column cell to create any width. 您面临的视觉问题是因为没有第三列单元格可以创建任何宽度。 The entire third column is created by colspan s on X, 4, and 5, so it will appear to have no (or very little) width, and the cells will not expand without width rules if they don't have to. 整个第三列是由colspan在X,4和5上创建的,因此,它似乎没有(或很小)宽度,并且如果没有宽度规则,则像元也不会扩展。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM