在html中跨越表格单元格
[英]Spanning table cells in html
问题描述
I am doing some basic HTML - make a table and combine two cells, one below the other. 
我正在做一些基本的HTML - 制作一个表并组合两个单元格，一个在另一个之下。 I am trying to learn rowspan. 我正在努力学习rowspan。 So, I cannot remove the rowspan. 所以，我无法删除rowspan。
I tried the stuff in my book, with minor modifications. 我尝试了书中的内容，只做了一些修改。 I get the result below. 我得到下面的结果。 I want the second row (potato) to appear below the the first one. 我希望第二行（马铃薯）出现在第一行（马铃薯）下方。 How do I do this ? 我该怎么做呢 ？
HTML code - 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 code - CSS代码 -
td[rowspan|="2"] {background: orange;}
Book example - 书中的例子 -
EDIT - 编辑 -
After adding <tr><td></td><td></td></tr> after the first row, I get the output below. 在第一行之后添加<tr><td></td><td></td></tr>之后，我得到下面的输出。 The orange cell is just one cell thick and not two, like my book. 像我的书一样，橙色细胞只有一个细胞而不是两个细胞。 Why ? 为什么？
3 个解决方案
解决方案1
3 已采纳 2014-12-15 06:35:59
rowspan was breaking the table layout removing it will fix the layout rowspan打破了表格布局，删除它将修复布局
td.orange { background: orange; }
<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>
so you need to add extra row below to fix the rowspan 所以你需要在下面添加额外的行来修复rowspan
td.orange { background: orange; }
<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>
td{ padding:2px; }
<table border="1"> <tr> <td>row 1</td> <td rowspan="2">col merge</td> <td> </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> </td> </tr> </table>
解决方案2
0 2014-12-15 06:43:19
As your rows are spanning 2 in first rows case. 由于您的行在第一行中跨越2个案例。 You need to enter a blank row to account for it: 您需要输入一个空行来说明它：
<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>
More relevant use of rowspan: 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>
解决方案3
0 2014-12-15 17:35:06
Think of it like, the highest priority is given to the first row, then the second row and so on. 可以想象，最高优先级是第一行，然后是第二行，依此类推。 First you, specify the rowspans for the td 's in first row, then, if the second row has any columns which are free, then add that many td 's. 首先，在第一行中指定td的rowspans，然后，如果第二行有任何可用的列，则添加许多td 。 And so, on. 等等。 You can find the example below. 您可以在下面找到示例。
http://jsbin.com/yovahe/1/edit?html,output http://jsbin.com/yovahe/1/edit?html,output
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.