行跨度无法正常运行

2017-06-02 125 views 1 likes

我试图创建一个表的布局如下图所示的图像：行跨度无法正常运行

下面是我的html代码：

<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Table sketch</title> 
    <style> 
     table { 
      table-layout: fixed; 
      width: 20em; 
     } 
     td { 
      width: 4em; 
      height: 1.5em; 
      text-align: center; 
     } 
    </style> 
</head> 
<body> 
    <table border="1"> 
     <tr> 
      <td colspan="4">&nbsp;1&nbsp;</td> 
     </tr> 
     <tr> 
      <td rowspan="2">&nbsp;2&nbsp;</td> 
      <td rowspan="2">&nbsp;3&nbsp;</td> 
     </tr> 
     <tr> 
      <td colspan="2">&nbsp;4&nbsp;</td> 
     </tr> 
     <tr> 
      <td>&nbsp;5&nbsp;</td><td>&nbsp;6&nbsp;</td> 
     </tr> 
     <tr> 
      <td colspan="4">&nbsp;7&nbsp;</td> 
     </tr> 
    </table> 
</body>

但它产生以下布局：

当我将第二行的rowspan值从2更改为3时。它给了我正确的布局。

<tr> 
    <td rowspan="3">&nbsp;2&nbsp;</td> 
    <td rowspan="3">&nbsp;3&nbsp;</td> 
</tr>

这是一个link jsbin。

但为什么第一个html代码不工作？任何帮助，非常感谢。

谢谢。

来源

2017-06-02 Vikalp

回答

您有一个tr标签太多：第二行必须包含3个元素（即，对于该行中的第三个元素没有单独tr）：

table { 
 
      table-layout: fixed; 
 
      width: 20em; 
 
     } 
 
     td { 
 
      width: 4em; 
 
      height: 1.5em; 
 
      text-align: center; 
 
     }

<body> 
 
    <table border="1"> 
 
     <tr> 
 
      <td colspan="4">&nbsp;1&nbsp;</td> 
 
     </tr> 
 
     <tr> 
 
      <td rowspan="2">&nbsp;2&nbsp;</td> 
 
      <td rowspan="2">&nbsp;3&nbsp;</td> 
 
      <td colspan="2">&nbsp;4&nbsp;</td> 
 
     </tr> 
 
     <tr> 
 
      <td>&nbsp;5&nbsp;</td><td>&nbsp;6&nbsp;</td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="4">&nbsp;7&nbsp;</td> 
 
     </tr> 
 
    </table> 
 
</body>

来源

2017-06-02 14:33:21 Johannes

行跨度无法正常运行

回答

相关问题