使用显示标签修复表格的宽度答案

【问题标题】：Fix width for table with Display Tag使用显示标签修复表格的宽度
【发布时间】：2011-10-03 16:19:50
【问题描述】：

我想使用显示标签来固定表格宽度。

.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 等），甚至我的显示标签分页也消失了。我该如何解决？谢谢。

【问题讨论】：

标签： css jsp displaytag

【解决方案1】：

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

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

【讨论】：

仍然不能:(有什么想法吗？谢谢。
为每个 TH 指定宽度，一切就绪。如果您仍然无法发布代码，我会修复它:)
谢谢@Bala，我稍后再试。如果不能，我会告诉你。再次感谢。
固定表格布局让我有些难以管理。所以，我就是这样。 .displayTable { border: 1px solid #666; width: 100%; margin: 20px 0 20px 0 !important; } 并且我在 CSS 中设置了每个列类，因为我的表格的大多数列都有不同的宽度。感谢您的提示。

【解决方案2】：

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

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

}

.colId{
width: 2%;
}

<display:column class="colId">

【讨论】：