html - 写真付き HTML テーブル セル幅 - クロス ブラウザ

Question

私は次の HTML コードを持っています: 私がやろうとしているのは、画像を表示し、画像の下にテキストを表示することです。例：

<table bgcolor="yellow" cellspacing="0" cellpadding="0">
        <tr>
            <td  width="100%">
                        <img width="100%" src="http://eofdreams.com/data_images/dreams/cat/cat-01.jpg" border="0"  style="vertical-align: top;"/> <br/>
                        <div  style="background-color: #023F7D">
                            <p>test</p>
                        </div>

                    </td>
        </tr>
    </table>

上記のコードは、画像の右側に黄色の縦縞を残します。画像は TD 全体をカバーしていません。

img タグに width="100%" を入れると、問題は写真の下に黄色のストライプが表示されることです。これは IE でのみ発生します (Safari では問題なく動作します)。写真の下にスペースなしでdivを表示したい。

私は何を間違っていますか？