想调整一下GridView的样式(最好有现成的可借鉴的代码)
默认的情况下,GridView显示的样式你懂的。。。
现主要想改善以下几点:
1.行与行之间非常密(我想通过什么方法让其看起来舒服一些,比如增大行高度??)
2.标题头和行的高度一样(说白了就是想让人一看到就能感觉到标题头与普通行的不同,比如加大标题头行的高度、颜色等)
总之,项目中有很多用到GridView的界面,想来个统一的、能看得过去的样式(没必要搞的多华丽,简单一点直观一些为主要目的)。。。
------解决方案--------------------
自己封装一个,很多样子自己设定,比如gridview有headstyle,可以自己增加一些属性,比如行交替颜色,这样重载RowDataBound事件,里面对行做不同的颜色,字体等信息
------解决方案--------------------
.divGrid
{
border-collapse: collapse;
border: solid 1px #93c2f1;
font-size: 10pt;
}
.divGrid2
{
border-collapse: collapse;
border: solid 1px #93c2f1;
font-size: 10pt;
}
.gridview_m
{
border-collapse: collapse;
border: solid 1px #93c2f1;
width: 100%;
font-size: 10pt;
}
.gridview_m td, th
{
border-collapse: collapse;
border: solid 1px #93c2f1; /*#93c2f1;*/
font-size: 10pt; /*padding-left: 5px;*/
padding-left: 5px;
}
.gridHeader
{
font-style: normal;
font-size: larger;
font-weight: bold;
color: White;
height: 50px;
white-space: nowrap;
overflow: hidden;
border: 1px solid #BBE1F1; /*background-color: #F0FBEB;*/ /*background-color: #BBE1F1;*/ /* background-color: #008DB4;*/
background-image: url('images/bg2.jpg');
}
.selectRow
{
background-color: LightBlue;
color: White;
}
<div id="divGridView1" style="width: 1000px; min-width: 1000px; margin-top: 6px;
padding: 10px;" class="divGrid">
<asp:GridView ID="JobList" runat="server" AutoGenerateColumns="False" CssClass="gridview_m"
GridLines="Vertical" Width="1000px" OnRowDataBound="JobList_RowDataBound" EnableModelValidation="True">
<Columns>
</Columns>
<EmptyDataTemplate></EmptyDataTemplate>
<EmptyDataRowStyle CssClass="gridHeader" Height="30px" HorizontalAlign="Center" />
<HeaderStyle Wrap="false" Height="30px" CssClass="gridHeader" />
<AlternatingRowStyle Wrap="false" Height="30px" />
<SelectedRowStyle BackColor="Blue" Font-Bold="True" ForeColor="White" />
<RowStyle Wrap="false" Height="30px" />
</asp:GridView>
</div>
------解决方案--------------------
/*=============editTab样式==============*/
.editTab{
background: #fff;
border-top:1px solid #b4b4b4;
border-left:1px solid #b4b4b4;
color:#000;
margin:0;
width:100%;
}
.editTab th{
background:#e9e9e9;
border-top:1px solid #ffffff;
border-bottom:1px solid #cccccc;
border-right:1px solid #cccccc;
border-left:1px solid #ffffff;
font-weight:normal;
text-align:right;
height:24px;
line-height:24px;
vertical-align:middle;
padding-right:10px;
}
.editTab td{
border-top:1px solid #ffffff;
border-bottom:1px solid #cccccc;
border-rig