thのテキストの高さに依存してしまうのを解消したい

Question

前提・実現したいこと

下記のtableのように、thのテキストの高さの影響で一番上のtdのみ高さが変わってしまいますので、
tdの高さを全て30pxで統一させたいです。
cssの問題でしょうか。
ご教授いただけますと幸いです。

<table width="500">
        <tbody>
            <tr>
                <td rowspan="3">ねこ<br>いぬ</td>
                <td>AAA</td>
                <td>BBB</td>
            </tr>
            <tr>
                <td>AAA</td>
                <td>BBB</td>
            </tr>
            <tr>
                <td>AAA</td>
                <td>BBB</td>
            </tr>
            <tr>
                <td rowspan="2">くじら<br>からす</td>
                <td>AAA</td>
                <td>BBB</td>
            </tr>
            <tr>
                <td>AAA</td>
                <td>BBB</td>
            </tr>
        </tbody>
    </table>

<style>
        table,
        td,
        th {
            border: 1px solid #595959;
            border-collapse: collapse;
        }

        td,
        th {
            padding: 3px;
            width: 30px;
        }

        td{
            height: 30px;
        }
    </style>

Comments

[hatena19]

Chromeで試してみましたが、画像のようにはなりませんでした。
どのブラウザで試しましたか。
Codepenサンプル
https://codepen.io/hatena19/pen/xxqBgox

[itagagaki]

示されているHTMLとCSSだけのコードだけで試しましたが、そうはならないし、上下は中央寄せになりました。本当にそのコードで試されましたか？

Answer 1

コメントをいただき気づきました... reset.cssを適用しておりました。
reset.css内のvertical-align:baseline;の記述が影響していたようです。
こちらをvertical-align:top;に変更したら望んでいた通りの形になりました。