Question

我需要一个关于webform的表格，其中包含一个可编辑的列。

我尝试了一个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;
}

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

可能是因为Microsoft默认主题设置否定了失败的CSS选项吗？而且，一般来说，不可能微调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");

如何微调ASP GridView

1 个答案: