如何微调 ASP GridView

Question

我需要一个网络表单上的表格，其中包含一个可编辑的列。

我尝试了一个 HTML 表格，但使用 tbody{height:150px; overflow:auto;} 后发现，将列标题与正文中的列对齐很困难，而在正文中使用 <input> 标记更难。此外，<input> 在<table> 中的宽度是不可更改的； size 选项是关于文本框中允许的字符数。

我尝试了 DevExpress，但很难获得一个可编辑的列。

现在我正在尝试使用 ASP Gridview，但发现很难微调布局。这是我的新 App_Themes 中的 CSS：

table#GridView_Samples 
{
    table-layout:fixed;
    border:1px solid grey;  
}
table#GridView_Samples th
{
    font-family:Verdana;font-size:11px; font-style:normal;
}
table#GridView_Samples td
{
    font-family:Verdana;font-size:11px; font-style:normal;
    border:1px solid lightgrey;
    padding: 0px, 5px 0px, 5px;
}

字体更改正确，只是列标题仍然是粗体，并且填充不起作用。

会不会是失败的 CSS 选项被 Microsoft 默认主题设置否决了？而且，一般来说，不可能微调 ASP 控件的所有方面？

---

编辑：这是html输出的片段（手工漂亮）：

            <table cellspacing="0" rules="all" Mode="NumericFirstLast" 
            border="1" id="GridView_Samples" 
            style="border-collapse:collapse;">
                    <tr>
                        <th scope="col">Project</th>
                        <th scope="col">Monster</th>
                        <th scope="col">Omschrijving</th>
                        <th scope="col">% Lutum (gemeten)</th>
                        <th scope="col">% Org.Stof (gemeten)</th>
                        <th scope="col">% Lutum (toetsing)</th>
                        <th scope="col">% Org.Stof (toetsing)</th>
                    </tr>
                    <tr>
                        <td style="width:60px;">P-0002</td>
                        <td style="width:60px;">S-01</td>
                        <td style="width:150px;">Sample 01</td>
                        <td style="width:60px;">4</td>
                        <td style="width:70px;">20</td>
                        <td style="width:60px;">
                                <input name="GridView_Samples$ctl02$TextBoxLutum" type="text" 
                                id="GridView_Samples_TextBoxLutum_0" style="width:60px;" />
                        </td>
                        <td style="width:70px;">
                            <input name="GridView_Samples$ctl02$TextBoxOrganicMatter" type="text"
                            id="GridView_Samples_TextBoxOrganicMatter_0" style="width:70px;" />
                        </td>
                    </tr>

Answer 1

既然可以在标记中使用实际的 GridView，为什么还要使用原始 HTML 标记？这是我目前在一个项目中使用的 GridView：

<asp:GridView runat="server" CellPadding="4" ForeColor="#333333" ID="theGrid" Width="100%" AllowSorting="true" AutoGenerateColumns="false" OnSorting="theGrid_Sorting" OnRowDataBound="theGrid_RowDataBound">
    <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
    <EditRowStyle BackColor="#999999" />
    <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
    <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
    <Columns>
        <asp:BoundField DataField="Name"
                        HeaderText="Name"
                        HeaderStyle-Wrap="false" 
                        SortExpression="Name" />
    ... more columns ...
    </Columns>
</asp:GridView>

您可以看到它如何为您设置所需的所有样式的属性。

---

编辑：要执行某些特定的操作，例如左填充，您仍然需要使用 CSS 样式，但由于 GridView 在数据绑定时创建单元格，您必须在运行时设置它们的样式。使用 GridView 的 RowDataBound 事件处理程序并在其中尝试以下操作：

foreach (TableCell cell in e.Row.Cells)
    cell.Style.Add("padding-left", "10px");