Question

我正在尝试使用表格创建此形状： The shape

我的HTML代码是这样的：

<html>
    <head>
        <title>Exercise!</title>
    </head>
    <body>
        <table border="1" width="100%" height="100%">
            <tr>
                <td colspan="2"></td>
                <td colspan="3"></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td colspan="1"></td>
                <td colspan="2"></td>
                <td colspan="1"></td>
                <td colspan="2"></td>
                <td colspan="1" rowspan="2"></td>
            </tr>
            <tr>
                <td colspan="2"></td>
                <td colspan="1"></td>
                <td colspan="2"></td>
                <td colspan="1"></td>

            </tr>
        </table>
    </body>
</html>

这个HTML代码让我形成了错误的形状：

wrong shape

但是当我添加没有colspan和rowspan的行时，浏览器会显示正确的形状，但需要额外的行：

almost correct shape

以下是创建正确形状但带有额外行的代码：

<html>
    <head>
        <title>Exercise!</title>
    </head>
    <body>
        <table border="1" width="100%" height="100%">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2"></td>
                <td colspan="3"></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td colspan="1"></td>
                <td colspan="2"></td>
                <td colspan="1"></td>
                <td colspan="2"></td>
                <td colspan="1" rowspan="2"></td>
            </tr>
            <tr>
                <td colspan="2"></td>
                <td colspan="1"></td>
                <td colspan="2"></td>
                <td colspan="1"></td>

            </tr>
        </table>
    </body>
</html>

有什么问题？

编辑：IE显示一个大的空白矩形!!!!这也是什么问题？

Answer 1

问题可能是边界问题。当您添加包含指定的所有字段的行时，它会在所有字段的每个字段之间绘制边框，但如果没有该行，则不会绘制某些边框，因此某些行的像素数少于其他行

Answer 2

在WebKit中为我精彩地工作。摆脱每个tr的边界肯定。你使用的是什么浏览器？（另外，我添加了rowspan。）

小提琴：http://jsfiddle.net/whqVC/

按表标记绘制一些矩形

2 个答案: