Question

我试图使用rowspan创建一个相当简单的表，并且它按预期工作。但是，问题是在解析了所有跨越的单元格后，单元格出现;它们不在我认为的位置。

这是我的代码：

<html> <body> <table width="100%" border="1"> <tr> <td rowspan="7"> 7 row </td> <td> 1 row </td> </tr> <tr> <td> 1 row </td> </tr> <tr> <td rowspan="5"> 5 row </td> </tr> <tr> <td> <i>This shouldn't be here, but below and aligned to the left side of the table</i> </td> <td> <i>This shouldn't be here, but below and aligned at the right side of the table</i> </td> </tr> </table> </body> </html>

以下是Chrome和Firefox的呈现方式（我没有在Stack Overflow上发布内嵌图像的声誉）：

http://embernet.com/misc/rowspan.gif

这两个罗嗦的单元格真的应该在第1列和第1列中2已经建立，而不是新的第3列和第4列。

问题似乎来自于我跨越从未单独实现的行。请记住，这是一个更大的，动态生成的表的一部分，在某些情况下将显示7行中的每一行。我知道有人会不可避免地问为什么我需要这样做。

我没有看到规格中的任何内容表明我不能这样做，所以我希望我能做到这一点。我只是遗漏了一些明显的东西。

JSFiddle就在这里：https://jsfiddle.net/mLard575/

Answer 1

我不确定你在期待什么。根据我的理解，我给出了两种可能性。

根据您的要求选择

第一种方法：

＆＃13;

table { 
    border-collapse: collapse;
}

td {
    padding: 20px; 
    border: 1px solid black; 
    text-align: center;
}

＆＃13;

<body>

<table>
    <tbody>
    <tr>
        <td rowspan="7">7</td>
        <td> 1 </td>        
    </tr>
     <tr>
        <td> 1 </td>
    </tr>
    <tr>
        <td rowspan="5"> 5 </td>   
    </tr>
    <tr>
        <td> 1 </td>
    </tr>
    <tr>
        <td> 1 </td>
    </tr>
     <tr>
        <td> 1 </td>
    </tr>
     <tr>
        <td> 1 </td>
    </tr>
     <tr>
        <td> 1 </td>
        <td> 1 </td>
    </tr>
   
    </tbody>
</table>
 
</body>

＆＃13;

第二种方法：

＆＃13;

table { 
    border-collapse: collapse;
}

td {
    padding: 20px; 
    border: 1px solid black; 
    text-align: center;
}

＆＃13;

<body>

<table>
    <tbody>
    <tr>
        <td rowspan="7">7</td>
        <td> 1 </td>        
    </tr>
     <tr>
        <td> 1 </td>
    </tr>
    <tr>
        <td> 1 </td>   
    </tr>
    <tr>
        <td> 1 </td>
    </tr>
    <tr>
        <td> 1 </td>
    </tr>
     <tr>
        <td> 1 </td>
    </tr>
     <tr>
        <td> 1 </td>
    </tr>
     <tr>
        <td> 1 </td>
        <td> 1 </td>
    </tr>
   
    </tbody>
</table>
 
</body>

＆＃13;

如果这两种方法不适合你。只需用图表示例解释一下即可更新代码。

跟随＆＃34;完成＆＃34;的HTML单元格rowspan没有按预期工作

1 个答案: