带显示标签的表格固定宽度
问题描述:
我想使用显示标签修复表格宽度。带显示标签的表格固定宽度
.displayTable table {
border: 1px solid #666;
width: 100%;
margin: 20px 0 20px 0 !important;
}
.displayTable th, .displayTable td {
padding: 2px 4px 2px 4px !important;
text-align: left;
vertical-align: top;
width: 100%
}
.displayTable thead tr {
background-color: #9999CC;
}
.displayTable th.sorted {
background-color: #9999CC;
}
.displayTable th a,.displayTable th a:visited {
color: black;
}
.displayTable th a:hover {
text-decoration: underline;
color: black;
}
.displayTable th.sorted a,.displayTable th.sortable a {
background-position: right;
display: block;
width: 100%;
}
.displayTable th.sortable a {
background: url(../img/arrow_off.png) no-repeat right center ;
}
.displayTable th.order1 a {
background: url(../img/arrow_down.png) no-repeat right center ;
}
.displayTable th.order2 a {
background: url(../img/arrow_up.png) no-repeat right center;
}
.displayTable tr.odd {
background-color: #fff
}
.displayTable tr.tableRowEven,.displayTable tr.even {
background-color: #fff
}
.displayTable div.exportlinks {
background-color: #eee;
border: 1px dotted #999;
padding: 2px 4px 2px 4px;
margin: 2px 0 10px 0;
width: 79%;
}
.displayTable span.export {
padding: 0 4px 1px 20px;
display: inline;
display: inline-block;
cursor: pointer;
}
.displayTable span.excel {
background-image: url(../img/ico_file_excel.png);
}
.displayTable span.csv {
background-image: url(../img/ico_file_csv.png);
}
.displayTable span.xml {
background-image: url(../img/ico_file_xml.png);
}
.displayTable span.pdf {
background-image: url(../img/ico_file_pdf.png);
}
.displayTable span.rtf {
background-image: url(../img/ico_file_rtf.png);
}
.displayTable span.pagebanner {
background-color: #eee;
border: 1px dotted #999;
padding: 2px 4px 2px 4px;
width: 79%;
margin-top: 10px;
display: block;
border-bottom: none;
}
.displayTable span.pagelinks {
background-color: #eee;
border: 1px dotted #999;
padding: 2px 4px 2px 4px;
width: 79%;
display: block;
border-top: none;
margin-bottom: -5px;
}
取决于加载的数据,表格宽度会有所不同。所以,我想通过固定表格的宽度使它看起来更好。但我不能。 我该如何修复桌面宽度?
我尝试用Div来包装Display,并设置Div的css类。但它仍然无法正常工作(对于display:table-cell
或display:inline-block;
感谢
.commonList{
overflow: hidden;
background: #c0c0c0;
display: table-cell
text-align: center;
width: 100%;
height: 100%;
}
编辑:当我尝试换显示表,上面的CSS设置的股利,表格的宽度达到100%,但由于每个。的表格有不同的宽度,因为第一列变得如此宽(它只显示id,1,2,3等),所以变得非常难看,甚至我的显示标签分页也没有了,我该如何解决它呢?谢谢
答
这是我的解决方案。 为每列指定一个特定的类并在显示标签中使用。
.displayTable {
border: 1px solid #666;
width: 100%;
margin: 20px 0 20px 0 !important;
}
.colId{
width: 2%;
}
<display:column class="colId">
答
.displayTable表{ 表格的布局:固定; }
小号pecify表格布局为固定的,这将解决你的问题
仍不能:(任何想法?谢谢。 – kitokid
,每TH指定的宽度和你所有的设置。如果你仍然无法张贴代码,我会得到它固定:) – Bala
谢谢@Bala我会在稍后尝试。如果不行,我会让你知道的。再次感谢。 – kitokid