使用css旋转GridView标头

Question

我需要在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;
}

Answer 1

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

<强> 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;
   }

Answer 2

<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>