テーブル入れ子した時の、テーブル外枠罫線を非表示にしたい
下記のように、入れ子にしたテーブルを作成しましたが、「AA, BB, 10, 20」のテーブル外枠線が太くなってしまいます。全て細い線で表示させるには、入れ子にしたテーブル外枠罫線を非表示にすれば良いのかなと思うのですが、どうすればよろしいでしょうか？
また他によい方法があればアドバイスお願いします。
条件として、
(1)入れ子でテーブルを作成
(2)教えて！gooのように細い線を使用
です。
よろしくお願いします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<STYLE TYPE="text/css">
<!--
TABLE {
margin: 0px;
border: 1px solid #ff0000;
border-collapse: collapse;
}
TD {
padding: 0px;
border-style: solid;
}
-->
</STYLE>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE border="1">
<TBODY>
<TR>
<TD>みかん</TD>
<TD>バナナ</TD>
<TD>パイン</TD>
</TR>
<TR>
<TD>やさい</TD>
<TD>
<TABLE width="100%" border="1">
<TBODY>
<TR>
<TD>AA</TD>
<TD>BB</TD>
</TR>
<TR>
<TD>10</TD>
<TD>20</TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD>りんご</TD>
</TR>
<TR>
<TD>いちご</TD>
<TD>すいか</TD>
<TD>れもん</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
