如何在我的 .net 代码中向 GridView 表添加圆角？

Posted 2023-03-06

【中文标题】如何在我的 .net 代码中向 GridView 表添加圆角？

【英文标题】：How do I add rounded corners to a GridView table in my .net code?

【发布时间】：2012-12-30 18:57:50

【问题描述】：

我尝试将 webkit 边框半径/moz 边框半径/边框半径添加到 css 定义和 .net 定义中，但无济于事。救命！

<tr>
    <td  align="center">
        <asp:GridView ID="GridView_VE" runat="server" CssClass="table1" HorizontalAlign="Center" Width="80%"   
        OnPageIndexChanging="GridView_VE_PageIndexChanging" Font-Names="Century Gothic" Font-Size="Large" Height="100%"
        AllowPaging="True" PageSize="4" RowStyle-Height="30px" -webkit-border-radius= "10px" -moz-border-radius="10px"
        border-radius="10px" border="2px" border-color="Black">
            <Columns>
            ...
            </Columns>
            <PagerStyle Height="20px" />
            <RowStyle Wrap="True" />
         </asp:GridView>
    </td>
</tr>

我也尝试过实现 td 、 tr 和 table 的角。但是又失败了。

【参考方案1】：

将<asp:GridView> 包裹在一个 div 中，然后将圆角放置在该 div 上。

<div class="rounded-corners">
    <asp:GridView>....</asp:GridView>
</div>

还有 CSS

.rounded-corners 
  border: 1px solid black;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  overflow: hidden;

【讨论】：

谢谢贾斯汀。但它不起作用，它只是在桌子的背景中创建了一个稍大的圆形框。内桌的方角仍然突出。叹息。

将 overflow: hidden 添加到 .rounded-corners CSS。看看这是否有助于突出内表的方角。

【参考方案2】：

您应该将样式元素包装在 style="" 元素中。像这样： <table style="border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;">

但最好只在第一行和最后一行设置border-radius。

无论如何，这里有几个选项：http://jsfiddle.net/wMGnq/

哦，还要确保border-collapse 没有设置为折叠！见：https://developer.mozilla.org/en/CSS/border-radius

【讨论】：

谢谢布拉姆！没用哟。尝试将样式元素放在表格和相应的 css 表（页眉/页脚等）中，但是没有。

【参考方案3】：

我没有看到问题，只需给你的表类并添加以下css：

.bordered 
    border: 1px solid #CCCCCC;
    border-radius: 6px;

【讨论】：

谢谢墨菲斯。添加一个 CSS 类没有帮助。但是，使用 css 类将 GridView 包装在 div 中会有所帮助。