Question

我将底行划分为3个部分时遇到问题。通过修复或重新设计它，我将不胜感激。

HTML：

<table border="1" cellspacing="0">
    <tr>
        <td style='width:120px; height:20px;'>Creeper</td>

        <td rowspan="2" style='width:120px; height:120px;'></td>
    </tr>

    <tr>
        <td rowspan="2" style='width:100px;'>Creeper</td>
    </tr>

    <tr>
        <td style='width:120px; height:120px;'></td>
    </tr>

    <tr>
        <td style='width:40px; height:20px;'></td>

        <td style='width:80px; height:20px;'></td>
    </tr>
</table>

的jsfiddle

http://jsfiddle.net/j76bY/

Answer 1

试试这个：http://jsfiddle.net/66ZSm/

<table border="1" cellspacing="0">
    <tr>
        <td colspan='3' style='width:120px; height:20px;'>Creeper</td>

        <td colspan='3' rowspan="2" style='width:120px; height:120px;'></td>
    </tr>

    <tr>
        <td colspan='3' rowspan="2" style='width:100px;'>Creeper</td>
    </tr>

    <tr>
        <td colspan='3' style='width:120px; height:120px;'></td>
    </tr>

    <tr>
        <td colspan='2' style='width:40px; height:20px;'></td>
        <td colspan='2' style='width:40px; height:20px;'></td>
        <td colspan='2' style='width:40px; height:20px;'></td>
    </tr>
</table>

Answer 2

如下更新您的表格。

<table border="1" cellspacing="0">
<tr>
    <td colspan="2" style='width:120px; height:20px;'>Creeper</td>

    <td rowspan="2" style='width:120px; height:120px;'></td>
</tr>

<tr>
    <td rowspan="2" colspan="2" style='width:100px;'>Creeper</td>
</tr>

<tr>
    <td style='width:120px; height:120px;'></td>
</tr>

<tr>
    <td style='width:40px; height:20px;'></td>
    <td style='width:80px; height:20px;'></td>
    <td style='width:120px; height:20px;'></td>
</tr>
</table>

DEMO

将表格列分为3部分

2 个答案: