时间戳

首页 > 解决方案 > 将gridview标题中的垂直文本与窄列对齐

css - 将gridview标题中的垂直文本与窄列对齐

问题描述

环境：Microsoft Visual Studio 2019 Community，ASP.NET v4.8 web application project using VB.NET

问题：我有一个带有文本和复选框列的网格视图。我想让标题文本垂直（仅在复选框列中）以节省空间。

这是使用以下方法完成的：

/* Vertical text for crowded table headings */
.verticalHeader {
    transform: rotate(-90deg);
    width: 120px;
    height: 20px;
    text-align: left;
    vertical-align: middle;
}

<asp:TemplateField
     HeaderText="Orgchart"
     SortExpression="Orgchart">
     <HeaderStyle CssClass="verticalHeader" />
     <ItemStyle  CssClass="narrowCol"/>
     <ItemTemplate>
        <asp:checkbox ID="cbOrgchart" runat="server" ></asp:checkbox>
     </ItemTemplate>
 <asp:TemplateField>

但是，垂直文本现在对于标题行来说太宽（即太高）并进入实际的复选框。

这可以通过使用加深标题行来解决

<HeaderStyle-height="130px"/>

在 gridview 声明或任何 templatefield 声明中。

问题是应用这种样式会使窄列标题高 130 像素，然后在旋转时变成 130 像素宽，因此我最终会在与我使用正常时一样宽的列中的复选框上看到窄垂直文本文本。

我尝试了各种方法将转换应用于文本，但没有成功。

这必须是可解决的，因为许多应用程序必须具有相同的要求，但我被卡住了。

标签： cssgridviewvertical-text

解决方案

推荐阅读