Question

我手动创建了这个表，我想使用gridview生成数据而不是使用表格，表格的四个角都有圆角。

<table border="0"  id="rounded-corner">
<thead>
<tr>

<th scope="col" class="rounded-company">#</th>
<th>RegNum</th>
<th class="rounded-q4">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<td class="rounded-foot-left">Summary</td>
<td>10</td>
<td  class="rounded-foot-right">some text</td>
</tr>
</tfoot>

是否可以使用gridview并仍然可以获得我想要的表格？

修改

这是表格的CSS：

/* table */
#rounded-corner
{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;    margin: 10px;   width: 571px;
    text-align: left;   border-collapse: collapse;
}
#rounded-corner thead th.rounded-company
{
    background: #b9c9fe url('images/left.png') left -1px no-repeat;
}
#rounded-corner thead th.rounded-q4
{
    background: #b9c9fe url('images/right.png') right -1px no-repeat;
}
#rounded-corner th
{
    padding: 8px;   font-weight: normal;
    font-size: 13px;    color: #039;
    background: #b9c9fe;
}
#rounded-corner td
{
    padding: 8px;   background: #e8edff;
    border-top: 1px solid #fff;     color: #669;
}
#rounded-corner tfoot td.rounded-foot-left
{
    background: #e8edff url('images/botleft.png') left bottom no-repeat;
}
#rounded-corner tfoot td.rounded-foot-right
{
    background: #e8edff url('images/botright.png') right bottom no-repeat;
}
#rounded-corner tbody tr:hover td 
{
    background: #d0dafd;
}

Answer 1

使用转发器

<table border="0"  id="rounded-corner">
<thead>
<tr>
<th scope="col" class="rounded-company">#</th>
<th>RegNum</th>
<th class="rounded-q4">Actions</th>
</tr>
</thead>

<tbody>
    <asp:Repeater runat="server" id="rpt_table1">
    <ItemTemplate>
    <tr>
        <td><%# Eval("foo1")%></td>
        <td><%# Eval("foo2")%></td>
        <td><%# Eval("foo3")%></td>
        <td><asp:Button CommandArgument='<%# Eval("id") %>' OnCommand="btnedit_command" ID="btnedit" Text="Edit" /></td>
    </tr>
    </ItemTemplate>
    </asp:Repeater>
</tbody>

<tfoot>
<tr>
<td class="rounded-foot-left">Summary</td>
<td>10</td>
<td  class="rounded-foot-right">some text</td>
</tr>
</tfoot>

</table>

关于.cs

背后的代码

    protected void btnedit_command(object sender, CommandEventArgs e)
    {
        // this is command argument value (ID) --> e.CommandArgument
    }

将此CSS样式应用于gridview

1 个答案: