Question

我想使用Display Tag修复表格宽度。

.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 table { 表格的布局：固定; }

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

Answer 2

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

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

}

.colId{
width: 2%;
}

<display:column class="colId">

使用显示标记修复表格的宽度

2 个答案: