Fix width for table with Display Tag

Question

I want to fix the table width using 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;
}

Depends on the data loaded, the table width varies. So, I want to make it look better by fixing the width of table. But I can't. How can I make it to fix the table width?

I try to wrap the Display with Div and set the css class of Div too. But It still doesn't work (for both display:table-cell or display:inline-block;. Thanks.

.commonList{
    overflow: hidden;
    background: #c0c0c0;
    display: table-cell 
    text-align: center;
    width: 100%;
    height: 100%;
}

Edited: When I try to wrap the display table with Div of the above css setting, table width become 100% . but as each of the column of table has various width, it becomes so ugly because the first column becomes so wide (which only display id ,1 ,2 ,3 etc) And even my display tag pagination gone. How can I solve it? Thanks.

Answer 1

.displayTable table { table-layout:fixed; }

Specify table layout as fixed and that will solve ur problem