Question

我正在做一些基本的HTML - 制作一个表并组合两个单元格，一个在另一个之下。 我正在尝试学习rowspan。所以，我无法删除rowspan。

我尝试了书中的内容，只做了一些修改。我得到下面的结果。我希望第二行（马铃薯）出现在第一行（马铃薯）下方。我该怎么做？

enter image description here

HTML代码 -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <link rel="stylesheet" type="text/css" href="rowspan.css">
    </head>
    <body>
        <table>
            <th>SaleItem</th><th>MoneyEarned</th>
            <tr>
                <td rowspan="2">Apple & Mango</td><td>35</td>
            </tr>
            <tr>
                <td>Potato</td><td>15</td>
            </tr>
        </table>
    </body>
</html>

CSS代码 -

td[rowspan|="2"] {background: orange;}

书籍示例 -

enter image description here

编辑 -

在第一行之后添加<tr><td></td><td></td></tr>后，我得到下面的输出。像我的书一样，橙色细胞只有一个细胞而不是两个细胞。为什么？

enter image description here

Answer 1

rowspan打破了表格布局，删除它将修复布局

＆＃13;

td.orange {
  background: orange;
}

＆＃13;

<table border=0>
  <th>SaleItem</th>
  <th>MoneyEarned</th>
  <tr>
    <td class="orange">Apple & Mango</td>
    <td>35</td>
  </tr>
  <tr>
    <td>Potato</td>
    <td>15</td>
  </tr>
</table>

＆＃13;

因此您需要在下面添加额外的行来修复rowspan

＆＃13;

td.orange {
  background: orange;
}

＆＃13;

<table border=1>
  <th>SaleItem</th>
  <th>MoneyEarned</th>
  <tr>
    <td class="orange" rowspan="2">Apple & Mango</td>
    <td>35</td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td>Potato</td>
    <td>15</td>
  </tr>
</table>

＆＃13;

td{
padding:2px;
}

＆＃13;

<table border="1">
  <tr>
    <td>row 1</td>

    <td rowspan="2">col merge</td>
    <td>&nbsp;</td>
    <td rowspan="3">all col merge</td>
  </tr>
  <tr>
    <td>row 2</td>
    <td rowspan="2">col merge</td>
  </tr>
  <tr>
    <td>row 3</td>
    <td>&nbsp;</td>
  </tr>
</table>

＆＃13;

Answer 2

由于您的行在第一行中跨越2个案例。您需要输入一个空行来说明它：

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">    
    <link rel="stylesheet" type="text/css" href="rowspan.css">
</head>


<body> 

    <table>
        <th>SaleItem</th><th>MoneyEarned</th>
        <tr>
            <td rowspan="2">Apple & Mango</td><td>35</td>
        </tr>
    <tr></tr>
        <tr>
            <td>Potato</td><td>15</td>  
        </tr>
    </table>

    </body>

</html>

rowspan的更多相关用法：

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">    
    <link rel="stylesheet" type="text/css" href="rowspan.css">
</head>


<body> 

    <table>
        <th>SaleItem</th><th>Day</th><th>MoneyEarned</th>
        <tr>
            <td rowspan="2">Apple & Mango</td><td>Day1</td><td>35</td>
        </tr>
    <tr><td>Day2</td><td>25</td></tr>
        <tr>
            <td>Potato</td><td>Only one day</td><td>15</td> 
        </tr>
    </table>

</body>

Answer 3

想想它，最高优先级给予第一行，然后是第二行，依此类推。首先，在第一行中指定 td 的行数，然后，如果第二行有任何可用的列，则添加许多 td 。等等。您可以在下面找到示例。

http://jsbin.com/yovahe/1/edit?html,output

在html中跨越表格单元格

3 个答案: