asp gridview css borderが範囲外になる

Question

以下は、gridviewのCSSとASPコードです。 境界線が広がっていると予想されます。 Width = 100％を設定しようとしましたが、境界線をグリッドのサイズに追従させて、グリッドビューを広げて不必要にスペースを占有します。

この

は丸めコーナー

のCSSとのAsp GridViewのある

CSS：

.rounded-corners { 
     border: 1px solid #565656; 
     -webkit-border-radius: 8px; 
     -moz-border-radius: 8px; 
     border-radius: 8px; 
     overflow: hidden; 
} 


    .Grid td, .Grid th { 
     border: 1px solid #565656; 
     text-align: center; 
     padding-top: 3.5px; 
     padding-bottom: 3.5px; 
     font-size: medium; 
     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',  'Lucida Sans', Arial, sans-serif; 
    } 

ソースコード：

<div class="rounded-corners"> 
<div> 
<table class="Grid" cellspacing="0" rules="all" border="1" style="border-collapse:collapse;"> 
<tbody> 
<tr> 
<th>Description</th> 
<th>Time</th> 
<th>Time</th> 
</tr> 
<tr> 
<td>abc</td> 
<td>07:30</td> 
<td>07:30</td> 
</tr> 
<tr> 
<td>def</td> 
<td>07:30</td> 
<td>07:30</td> 
</tr> 
<tr> 
<td>ghi</td> 
<td>07:30</td> 
<td>07:30</td> 
</tr> 
</tbody> 
</table> 
</div> 
</div> 

Answer 1

私は、グリッドは次のようにレンダリングされると思う：

<div class="Grid" id="XXXX_gv1"> 
<table> 
<tr><th>column 1</th><th>column 2</th><th>column 3</th></tr> 
<tr><td>value 1</td><td>value 2</td><td>value 3</td></tr> 
<tr><td>value 1</td><td>value 2</td><td>value 3</td></tr> 
</table> 
</div> 

は、あなたがそれをスタイルできます

.Grid { 
    display:inline-block; /* trick to not take 100%. */ 
    /* alternatively: you could border .Grid>table */ 
    border-radius:8px; 
} 

.Grid>table>tbody>tr:first-row { 
    /* special stuff for the first row here */ 
}