使用 css 旋转 GridView 标题答案

【问题标题】：Rotate GridView header using css使用 css 旋转 GridView 标题
【发布时间】：2018-03-14 00:33:24
【问题描述】：

我需要在 GridView 中旋转标题。我搜索了网站并找到了一些信息。但是我不知道如何正确显示它。我可以旋转标题文本，但它显示在项目行上。有人能告诉我如何解决吗？

我的输出：

CSS 代码在这里：

 th.test, .test th {
    font-size: 11px;
    font-weight: bold;
    background-color: greenyellow;
    padding: 5px;
    text-transform: none;
    text-align: left;
    transform: 
    translate(25px, 51px)
    rotate(315deg);
    width: 30px;
}

【问题讨论】：

你可以试试写模式developer.mozilla.org/en-US/docs/Web/CSS/writing-mode例子来测试和玩codepen.io/gc-nomade/pen/EKQKBe如果你喜欢rotate()，那么有技巧：codepen.io/gc-nomade/pen/Cqkigvariantecodepen.io/gcyrillus/details/EvCHi

标签： css asp.net gridview

【解决方案1】：

<style>
        .verticaltext
        {
            writing-mode: tb-rl;
            filter: flipv fliph;
        }
    </style>

 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
         GridLines="Both" DataKeyNames="ProductID">
        <Columns>
       <asp:BoundField DataField="ProductID" HeaderText="Product ID" SortExpression="ProductID">
       </asp:BoundField>
       <asp:BoundField DataField="ProductName" HeaderText="Product Name" SortExpression="ProductName" HeaderStyle-CssClass="verticaltext">
       </asp:BoundField>
       <asp:BoundField DataField="SupplierID" HeaderText="Supplier ID" SortExpression="SupplierID" HeaderStyle-CssClass="verticaltext">
       </asp:BoundField>
    </Columns>
    </asp:GridView>

【讨论】：

【解决方案2】：

您可以尝试使用此示例代码来旋转标题。

HTML

<table>
 <thead>
  <tr>
   <th>Name</th>
   <th>John</th>
   <th>Alex</th>
   <th>Rose</th>
   <th>Tim</th>
  </tr>
</thead>
<tbody>
 <tr>
  <td>values</td>
  <td>xxx</td>
  <td>yyy</td>
  <td>zzz</td>
  <td>xxx</td>
</tr>

CSS

table {
 margin-top: 100px;
      }
th {
background-color: green;
transform: rotate(-45deg);
transform-origin: 0 0 0;
text-align: left;
text-indent: 10px;
   }
td {
border: 1px solid black;
   }

【讨论】：