12798


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

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

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

■test.html

[code]

    <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>
    
[/code]

■style.css

[code]

    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%;
    }
    
[/code]


CC BY-SA 3.0
2015-07-29T08:03:54.650
12796
2015-07-29T09:07:23.717
2015-07-29T08:34:44.697
9183
9183
question
html css
asp.net GridViewのセル幅をCSSで指定する方法について


style.cssの書き方に問題があります。カンマで複数セレクタを指定する書き方を見直してください。

[code]

    table.grid1 th.name, table.grid1 td.name {
        width:40%;
    }
    
    table.grid2 th.name, table.grid2 td.name {
        width:30%;
    }
    
    table.grid1 th.tel, table.grid1 td.tel {
        width:60%;
    }
    
    table.grid2 th.tel, table.grid2 td.tel {
        width:70%;
    }
    
[/code]

余談ですが、せっかくなので `border="1" width="800"` の記述もスタイルシートに書かれると良いと思います。


CC BY-SA 3.0
2015-07-29T09:07:23.717
12798
2015-07-29T09:07:23.717
2238
12796
answer