rowspanで結合されたセルの高さを調整したい

HTMLで作成したtableにて、

lang
1<table rules="all">
2	<tr><td rowspan="2">ばなな</td><td rowspan="3">りんご</td><td rowspan="2">ぶどう</td></tr>
3	<tr>                                                                                 </tr>
4	<tr><td rowspan="2">すいか</td>                           <td rowspan="2">みかん</td></tr>
5	<tr>                           <td>なし              </td>                           </tr>
6</table>
7
8<style type="text/css">
9<!--
10table{
11	border: 1px;
12	border-style:solid;
13}
14td{
15	width: 100px;
16	height: 100px;
17}
18-->
19</style>

と作成し、１列目と２列目および２列目と３列目のセルに
段差が出るように作成しようとしました。
しかし、２列目のrowspan=3としているセルの結合されている側の高さが小さくなってしまい、
2列目のセルに対して１列目や３列目との段差がないように表示されてしまいます。

↓このように表示にしたい
![イメージ説明]WIDTH:472
↑しかし実際はこのように表示される

なにかいい方法はありますでしょうか？
ご教授お願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

私の環境ではこれで動きました。

lang
1<!doctype html>
2<style>
3  table { border-collapse: collapse; }
4  tr { height: 50px; }
5  td { border: solid 1px black; }
6</style>
7
8<table>
9  <tr>
10    <td rowspan=2>A-1,2
11    <td rowspan=3>B-1,2,3
12    <td rowspan=2>C-1,2
13  </tr>
14  <tr></tr>
15  <tr>
16    <td rowspan=2>A-3,4
17    <td rowspan=2>C-3,4
18  </tr>
19  <tr>
20    <td>B-4
21  </tr>
22</table>