2011-09-29 66 views
2

我想使用顯示標籤修復表格寬度。帶顯示標籤的表格固定寬度

.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-celldisplay:inline-block;感謝

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

編輯:當我嘗試換顯示錶,上面的CSS設置的股利,表格的寬度達到100%,但由於每個。的表格有不同的寬度,因爲第一列變得如此寬(它只顯示id,1,2,3等),所以變得非常難看,甚至我的顯示標籤分頁也沒有了,我該如何解決它呢?謝謝

回答

0

這是我的解決方案。 爲每列指定一個特定的類並在顯示標籤中使用。

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

} 

.colId{ 
width: 2%; 
} 

<display:column class="colId"> 
3

.displayTable表{ 表格的佈局:固定; }

小號pecify表格佈局爲固定的,這將解決你的問題

+0

仍不能:(任何想法?謝謝。 – kitokid

+0

,每TH指定的寬度和你所有的設置。如果你仍然無法張貼代碼,我會得到它固定:) – Bala

+0

謝謝@Bala我會在稍後嘗試。如果不行,我會讓你知道的。再次感謝。 – kitokid