如何减小gridview列的大小 [英] How to reduce the size of the gridview columns

问题描述

我正在使用10列的gridview。它出现在带有水平滚动条的页面中。我想减少网格视图的列宽。我正在使用tamplate字段作为网格视图列。请帮助。

解决方案

< asp：templatefield headertext =   >  
< headerstyle width =   50 /> 
< itemstyle width =   50 /> 
 ........ 
 ....... 
 ...... 
 ..... 
 < /   asp：templatefield  >  

问候..：笑：

使用follwoing样式，将listgrid类放到gridview并删除应用于gridview的所有默认样式表。

然后你可以玩标题，行等的widh

< style> 
。 listgrid  
 {
  border-collapse  ： 折叠;  
  width  ：  100％;  
  border-top  < span class =code-keyword>：  1px solid #DDDDDD;  
  border-left  ：  1px solid #DDDDDD;  
  margin-bottom  ：  20px;  
} 
。  listgrid   td  
 {
  border -right  ：  1px solid #DDDDDD ;  
  border-bottom  ：  1px solid #DDDDDD;  
 
} 
。 listgrid   th  
 {
  border-right  ：  1px solid #DDDDDD;  
  border-bottom  ：  1px solid #DDDDDD;  
 
} 
。 listgrid   thead   th  
 {
  background-color  ：  #EFEFEF;  
 填充 ：  7px;  
} 
。 listgrid   thead   th   a ，。 listgrid   thead   th  
 {
  text-decoration  ： 无;  
 颜色 ： ＃222222;  
  font-weight  ： 粗体;  
} 
。 listgrid   tbody   td   a  
 { 
  text-decoration  ： 下划线;  
} 
。 listgrid   tbody   td  
 {
  vertical-align  ：  middle;  
  padding  ：  0px 5px;  
 背景 ：  #FFFFFF;  
  text-align  ：  left;  
 < span class =code-attribute> padding  ：  7px;  
} 
 < /   style  >  

I am using a gridview of 10 columns .so its appearing in the page with horizontal scroll bar.I want to reduce the column width of the grid view.i am using tamplate field for the grid view column.please help.

解决方案

<asp:templatefield headertext="" >
<headerstyle width="50" />
<itemstyle width="50" />
........
.......
......
.....
</asp:templatefield>

Regards..:laugh:

Use follwoing style , put listgrid class to gridview and remove all default style sheet applied to gridview.
and then you can play with widh of the header ,row etc

<style>
.listgrid
{
    border-collapse: collapse;
    width: 100%;
    border-top: 1px solid #DDDDDD;
    border-left: 1px solid #DDDDDD;
    margin-bottom: 20px;
}
.listgrid td
{
    border-right: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;

}
.listgrid th
{
    border-right: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;

}
.listgrid thead th
{
    background-color: #EFEFEF;
    padding: 7px;
}
.listgrid thead th a, .listgrid thead th
{
    text-decoration: none;
    color: #222222;
    font-weight: bold;
}
.listgrid tbody td a
{
    text-decoration: underline;
}
.listgrid tbody td
{
    vertical-align: middle;
    padding: 0px 5px;
    background: #FFFFFF;
    text-align: left;
    padding: 7px;
}
</style>

这篇关于如何减小gridview列的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！