テーブルのセル幅を下記のようにCSSで指定したのですが、
GridView1を表示する際、Nameセルの幅がGridView2のCSSで上書きされ、
30%になってしまいます。後に書いてあるCSSが有効になります。

異なるテーブルで同じクラス名を使用していても、テーブル毎に
それぞれセル幅を適用させたいのです。

CSSでテーブルのクラス名を指定してから、TDを指定すれば、
親子関係となって、そのテーブルにのみ適用されるイメージだったのですが、
指定方法が違うのでしょうか？

■test.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="all">
</head>
<body>
<table id="GridView1" class="grid1" border="1" width="800">
    <tr>
        <td class="name">あああああ</td>
        <td class="tel">０９０－１２３４－１２３４</td>
    </tr>
</table>

<br><br>

<table id="GridView2" class="grid2" border="1" width="800">
    <tr>
        <td class="name">いいいいい</td>
        <td class="tel">０８０－１２３４－１２３４</td>
    </tr>
</table>

</body>
</html>

■style.css

table.grid1 th.name, td.name {
    width:40%;
}

table.grid2 th.name, td.name {
    width:30%;
}

table.grid1 th.tel, td.tel {
    width:60%;
}

table.grid2 th.tel, td.tel {
    width:70%;
}