修复带有显示标签的表格的宽度

Question

我想使用显示标签修复表格宽度。

.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设置的div，表格宽度变为100%，但是由于表格的每一列都有不同的宽度，所以它变得很难看，因为第一列变得如此宽（只显示id，1，2，3等）并且甚至我的显示标签分页消失了怎么解决呢？

Answer 1

.displayTable 表 {
表格布局：固定；
将

表格布局指定为固定，这将解决您的问题

Answer 2

这是我的解决方案。 为每一列指定特定类别并在显示标记中使用。

.displayTable {
    border: 1px solid #666;
    width: 100%;
    margin: 20px 0 20px 0 !important;

}

.colId{
width: 2%;
}

<display:column class="colId">