css클래스 추가(스크롤 처리시 그리드 제목 항상 표시, 열 너비 조절)

main
이범준 1 year ago
parent 8772552e9e
commit 89f64922b3

@ -142,8 +142,8 @@
<div id="table-responsive--${pageName}" class="table-responsive" <div id="table-responsive--${pageName}" class="table-responsive"
style="overflow-x: scroll;height:500px;overflow-y: scroll;"> style="overflow-x: scroll;height:500px;overflow-y: scroll;">
<table id="DataTables_Table_0--${pageName}" <table id="DataTables_Table_0--${pageName}"
class="datatables-ajax table table-bordered dataTable no-footer"> class="table-layout-fixed datatables-ajax table table-bordered dataTable no-footer">
<thead> <thead class="sticky-thead bg-light">
<tr id="crdnThead--${pageName}" <tr id="crdnThead--${pageName}"
data-by="by--${pageName}" data-by-output="byOutput--${pageName}" data-by="by--${pageName}" data-by-output="byOutput--${pageName}"
data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}"> data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}">
@ -153,30 +153,32 @@
</tbody> </tbody>
<template id="crdnCols--${pageName}"> <template id="crdnCols--${pageName}">
<th style="min-width: 80px;" class="cmn">No.</th> <th style="width: 80px;" class="cmn">No.</th>
<th onclick="searchFromGridTitle('CRDN_INPT_SE_CD',this.innerText,'codeValue','FIM003');" <th onclick="searchFromGridTitle('CRDN_INPT_SE_CD',this.innerText,'codeValue','FIM003');"
style="min-width: 80px;" class="pvs bpv dpv eca">자료출처</th> style="width: 100px;" class="pvs bpv dpv eca">자료출처</th>
<th onclick="searchFromGridTitle('VHRNO',this.innerText,'match','part');" <th onclick="searchFromGridTitle('VHRNO',this.innerText,'match','part');"
style="min-width: 80px;" class="cmn">차량번호</th> style="width: 100px;" class="cmn">차량번호</th>
<th onclick="searchFromGridTitle('CRDN_YMD','위반일자','match','perfect');" <th onclick="searchFromGridTitle('CRDN_YMD','위반일자','match','perfect');"
style="min-width: 80px;" class="cmn">위반일시</th> style="width: 100px;" class="cmn">위반일시</th>
<th onclick="searchFromGridTitle('CRDN_PLC',this.innerText,'match','part');" <th onclick="searchFromGridTitle('CRDN_PLC',this.innerText,'match','part');"
style="min-width: 80px;" class="cmn">위반장소</th> style="width: 250px;" class="cmn">위반장소</th>
<th style="min-width: 80px;" class="cmn">체납액</th> <th
style="width: 100px;" class="cmn">체납액</th>
<th onclick="searchFromGridTitle('ATCH_FILE_CNT',this.innerText,'match','perfect');" <th onclick="searchFromGridTitle('ATCH_FILE_CNT',this.innerText,'match','perfect');"
style="min-width: 80px;" class="cmn">사진건수</th> style="width: 100px;" class="cmn">사진건수</th>
<th onclick="searchFromGridTitle('CRDN_SN',this.innerText,'match','perfect');" <th onclick="searchFromGridTitle('CRDN_SN',this.innerText,'match','perfect');"
style="min-width: 80px;" class="pvs dpv eca">스티커번호</th> style="width: 120px;" class="pvs dpv eca">스티커번호</th>
<th onclick="searchFromGridTitle('PARKNG_PSBLTY_RSLT_CD',this.innerText,'codeValue','FIM034');" <th onclick="searchFromGridTitle('PARKNG_PSBLTY_RSLT_CD',this.innerText,'codeValue','FIM034');"
style="min-width: 80px;" class="dpv">장애차량확인</th> style="width: 140px;" class="dpv">장애차량확인</th>
<th onclick="searchFromGridTitle('CRDN_STTS_CD',this.innerText,'codeValue','FIM010');" <th onclick="searchFromGridTitle('CRDN_STTS_CD',this.innerText,'codeValue','FIM010');"
style="min-width: 80px;" class="cmn">처리상태</th> style="width: 100px;" class="cmn">처리상태</th>
<th onclick="searchFromGridTitle('LEVY_EXCL_RSN_CD',this.innerText,'codeValue','FIM022');" <th onclick="searchFromGridTitle('LEVY_EXCL_RSN_CD',this.innerText,'codeValue','FIM022');"
style="min-width: 80px;" class="cmn">제외사유</th> style="width: 250px;" class="cmn">제외사유</th>
<th onclick="searchFromGridTitle('LEVY_EXCL_YMD',this.innerText,'ymd','');" <th onclick="searchFromGridTitle('LEVY_EXCL_YMD',this.innerText,'ymd','');"
style="min-width: 80px;" class="cmn">제외처리일자</th> style="width: 140px;" class="cmn">제외처리일자</th>
<th onclick="searchFromGridTitle('LEVY_EXCL_ETC_CN',this.innerText,'match','part');" <th onclick="searchFromGridTitle('LEVY_EXCL_ETC_CN',this.innerText,'match','part');"
style="min-width: 80px;" class="cmn">제외내역</th> style="width: 100px;" class="cmn">제외내역</th>
<th class="cmn dummy-th"></th>
</template> </template>
<template id="crdnRow--${pageName}"> <template id="crdnRow--${pageName}">
<tr data-key="{CRDN_ID}"> <tr data-key="{CRDN_ID}">
@ -193,6 +195,7 @@
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center cmn">{LEVY_EXCL_RSN_CD}</td> <td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center cmn">{LEVY_EXCL_RSN_CD}</td>
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center cmn">{LEVY_EXCL_YMD}</td> <td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center cmn">{LEVY_EXCL_YMD}</td>
<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center cmn">{LEVY_EXCL_ETC_CN}</td> <td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center cmn">{LEVY_EXCL_ETC_CN}</td>
<td class="dummy-td cmn"></td>
</tr> </tr>
</template> </template>
<template id="crdnNotFound--${pageName}"> <template id="crdnNotFound--${pageName}">
@ -200,16 +203,16 @@
<td valign="top" colspan="14" class="dataTables_empty text-center">단속 정보를 찾지 못했습니다.</td> <td valign="top" colspan="14" class="dataTables_empty text-center">단속 정보를 찾지 못했습니다.</td>
</tr> </tr>
<tr class="eca"> <tr class="eca">
<td valign="top" colspan="14" class="dataTables_empty text-center">단속 정보를 찾지 못했습니다.</td> <td valign="top" colspan="13" class="dataTables_empty text-center">단속 정보를 찾지 못했습니다.</td>
</tr> </tr>
<tr class="pvs"> <tr class="pvs">
<td valign="top" colspan="14" class="dataTables_empty text-center">단속 정보를 찾지 못했습니다.</td> <td valign="top" colspan="13" class="dataTables_empty text-center">단속 정보를 찾지 못했습니다.</td>
</tr> </tr>
<tr class="bpv"> <tr class="bpv">
<td valign="top" colspan="14" class="dataTables_empty text-center">단속 정보를 찾지 못했습니다.</td> <td valign="top" colspan="12" class="dataTables_empty text-center">단속 정보를 찾지 못했습니다.</td>
</tr> </tr>
<tr class="tpv"> <tr class="tpv">
<td valign="top" colspan="14" class="dataTables_empty text-center">단속 정보를 찾지 못했습니다.</td> <td valign="top" colspan="11" class="dataTables_empty text-center">단속 정보를 찾지 못했습니다.</td>
</tr> </tr>
</template> </template>
</table> </table>
@ -478,6 +481,7 @@ $(document).ready(function(){
fn_securityModeToggle($("#securityMode--top").is(":checked")); //보안모드 fn_securityModeToggle($("#securityMode--top").is(":checked")); //보안모드
$("#DataTables_Table_0--${pageName}").find("th").resizable({handles : "e"});
}); });

@ -1938,10 +1938,7 @@ progress {
} }
/* 그리드 테이블 */ /* 그리드 테이블 */
.table-layout-fixed { /* 그리드 테이블 공통 */
table-layout: fixed;
}
.dataTable th{ .dataTable th{
text-align: center; text-align: center;
} }
@ -1953,6 +1950,37 @@ progress {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
/* 셀내용에 관계없이 셀 너비 고정 */
.table-layout-fixed {
table-layout: fixed;
padding-right : 10px;
}
.dummy-th {
width:auto;
background-color: #ECEEF1;
}
.dummy-td {
background-color: #ECEEF1;
}
/* 스크롤 시에도 그리드 타이틀 표시 */
.sticky-thead {
position: sticky;
top: 0;
}
table:has(.sticky-thead) {
border-collapse: separate;
border-spacing: 0;
}
table:has(.sticky-thead) th,
table:has(.sticky-thead) td {
border-width: 0.5px;
border-color: #d9dee3;
}
@media (max-width: 575.98px) { @media (max-width: 575.98px) {
.table-responsive-sm { .table-responsive-sm {

Loading…
Cancel
Save