(a) table-layout: fixed;
(b) width: 1300px !important;
(c) max-width: 700px;
(d) min-width: 1500px;
(e) white-space: 해제 해야 개별 td가 적용됨.
(z) columns: [{ title: "num", width:100}, { title: "회사이름", width:200} ... ] 개별 적용
(a) 를 해제하면 (b), (c), (d) 적용
** DataTable에서 전체 길이를 제한하려면, table에 width를 주면 안된다. 그러면 개별 td의 폭은 조절해봐야 비율로써만 기능한다.
또한 이 경우, 오름차순 정렬 혹은 ajax로 수신하는 데이터의 양에 따라서 테이블내 td의 비율을 매번 조절해 버린다.
개선책은 table에 width 대신 개별 td 폭의 총합으로 table width를 조절해야 한다.
그리고 만약 td 안에 긴 내용이 있다면 '...' 처리 내지는 '줄바꿈' 처리를 추가해야만
table width를 유지하고, theader와 tbody의 td 간격을 유지할 수 있다.
'...' 처리
td {
max-width:150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
'줄바꿈'
word-break: break-all;
/* white-space: nowrap; */ 해제 필수
dataTables_scroll : 2개(dataTables_scrollHead, dataTables_scrollBody) 요소의 화면 상 보이는 width 설정
dataTables_scrollHead : 헤더 요소의 화면 상 보이는 width 설정 (테이블 요소보다 작게 설정 시 scroll 생성)
dataTables_scrollBody : tbody 요소의 화면 상 보이는 width 설정 (테이블 요소보다 작게 설정 시 scroll 생성)
.dataTables_scroll { width: 1000px; } 로 스크롤 화면 지정하고
[ { title: "num", width:100}, { title: "회사이름", width:200}, ... ] 로 각 width 지정.
각 width의 총합이 table의 전체 width 로 설정됨. 따로 css의 table-layout: fixed, max, mni-width 지정 X
.dataTables_scrollHead .dataTable { max-width: 700px;} 는 헤더의 전체 길이만 줄어듦. 바디는 각 width의 총합으로 유지.
<html>
<head>
<link rel="stylesheet" href="/post_inc/datatables/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<style>
table > tbody td:nth-chid(1) {
//width: 140px;
}
table > tbody td:nth-chid(n+10) { // 10 이상 요소
//width: 200px;
}
</style>
<style>
.dataTable,
.dataTable th,
.dataTable td{
border:1px solid #ccc;
}
/*
.dataTable{
table-layout: fixed;
width: 1300px !important;
max-width: 700px;
min-width: 1500px;
}
.dataTable.no-footer{
width: 1500px !important;
}
*/
.dataTable {
max-width: 1300px;
}
th, td {
text-align: center;
}
td {
//max-width:150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: blue;
word-break: break-all;
//max-width: 150px !important;
}
.dataTables_scrollHeadInner, table{
//max-width: 1300px;
}
.dataTables_scrollBody, table{
//max-width: 1300px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var page1_list_dt = null;
function page1_list(){
var tmp2 =
[ { title: "순번", width:100},
{ title: "회사이름", width:200},
{ title: "주문 종류", width:150},
{ title: "매매구분", width:250},
{ title: "가격", width:100},
{ title: "수량", width:80},
{ title: "체결", width:250},
{ title: "미체결", width:250},
{ title: "체결 가격", width:90}, ]
var tmp3 =
[ { title: "순번"},
{ title: "회사이름"},
{ title: "주문 종류"},
{ title: "매매구분"},
{ title: "가격"},
{ title: "수량"},
{ title: "체결"},
{ title: "미체결"},
{ title: "체결 가격"}, ]
var data = [
{"idx":"48", "company_name":"company1", "order_type":"buy1", "buy_type":"order1", "price":"111500", "amount":"17", "completion":"17", "incompletion":"0", "completion_price":"112000"},
{"idx":"47", "company_name":"12345781234567123456123125151223234232322332323", "order_type":"buy1", "buy_type":"order1", "price":"56100", "amount":"60", "completion":"60", "incompletion":"0", "completion_price":"4815"},
{"idx":"46", "company_name":"company1", "order_type":"buy1", "buy_type":"order1", "price":"56000", "amount":"12345781234567123456123125151223234232322332323", "completion":"100", "incompletion":"0", "completion_price":"56000"},
{"idx":"45", "company_name":"company1", "order_type":"buy1", "buy_type":"order1", "price":"99900", "amount":"20", "completion":"20", "incompletion":"0", "completion_price":"99900"},
{"idx":"44", "company_name":"company1", "order_type":"buy1", "buy_type":"order1", "price":"21700", "amount":"10", "completion":"10", "incompletion":"0", "completion_price":"21700"},
{"idx":"43", "company_name":"company1", "order_type":"buy1", "buy_type":"order1", "price":"9550", "amount":"20", "completion":"20", "incompletion":"0", "completion_price":"9550"}
]
var tmp1 = new Array();
i = 0;
$.each( data, function(key, val){
tmp1[i] = new Array();
tmp1[i].push(val.idx);
tmp1[i].push(val.company_name);
tmp1[i].push(val.order_type);
tmp1[i].push(val.buy_type);
tmp1[i].push(val.price);
tmp1[i].push(val.amount);
tmp1[i].push(val.completion);
tmp1[i].push(val.incompletion);
tmp1[i].push(val.completion_price);
i++;
});
// data를 새로 불러올 경우에는 아래처럼 내용을 지우고 다시 넣어줘야 한다
if(page1_list_dt){
page1_list_dt.clear();
page1_list_dt.rows.add(tmp1);
page1_list_dt.draw();
}
else{
page1_list_dt = $('#b1ix_tbl1').DataTable({
data: tmp1
,columns: tmp2
//, autoWidth: false
,aLengthMenu: [[15, 50, -1], [15, 50, "전체"]]
,order:[[0, 'desc']]
,ordering:false
,columnDefs: [
//{className: "text-left", targets: [11]},
// {visible: false, targets :[0]},
// {orderable: false, targets :[0,1,2,3,4,5]}
]
,dom: 'ifrt'
,scrollX: true
,scrollY: "200px"
,scrollCollapse: true
,paging: false
});
}
}
page1_list();
});
</script>
</head>
<body>
<h5>hi</h5>
<div class='hsr_result'></div><div class='hsr_output1'>
<table id="b1ix_tbl1">
<thead>
<tr>
<th rowspan="2" style="vertical-align:bottom;">r3</th> // td1
<th rowspan="2" style="vertical-align:bottom;">r3</th> // td2
<th colspan="2" style="vertical-align:bottom;">c4</th> // td3
<th colspan="5" style="vertical-align:bottom;">c5</th> // td4
</tr>
<tr>
<th>1</th> // td5
<th>2</th> // td6
<th>3</th> // td7
<th>4</th> // td8
<th>5</th> // td9
<th>6</th> // td10
<th>7</th> // td11
</tr>
</thead>
<!-- <colgroup>
<col style="width: 10%">
<col style="width: 10%">
<col style="width: 10%">
<col style="width: 10%">
<col style="width: 10%">
<col style="width: 10%">
<col style="width: 10%">
<col style="width: 10%">
<col style="width: 10%">
<col style="width: 10%">
</colgroup> -->
</table>
</div>
</body>
</html>
