Datatables - Tiêu đề cột không di chuyển khi cuộn theo chiều ngang

Tôi có một ví dụ đơn giản về vấn đề của mình. Tôi đang sử dụng Datatables 1.9. Các tiêu đề cột không di chuyển khi cuộn theo chiều ngang khi dữ liệu có thể đặt trong bảng html khác. Nó hoạt động tốt khi nó không có trong bảng html. Ví dụ của tôi thực sự được lấy từ ví dụ của họ về cuộn ngang nhưng tôi đã thêm bảng bên ngoài. Bất kỳ trợ giúp sẽ được đánh giá cao. Tôi đã nhìn khắp mọi nơi cho câu trả lời. Đây là mã. Cảm ơnDatatables - Tiêu đề cột không di chuyển khi cuộn theo chiều ngang

<head> 
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery.min.js"></script> 
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery-ui.min.js"></script> 
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery.dataTables.min.js"></script> 

</head> 

<form> 

<table> 
<tr> 
<td> 

    <div id="demo"> 
    <table id="example"> 
    <thead> 
    <tr> 
    <th>Rendering engine</th> 
    <th>Browser</th> 
    <th>Platform(s)</th> 
    <th>Engine version</th> 
    <th>CSS grade</th> 
    </tr> 
    </thead> 
    <tfoot> 
    <tr> 
    <th>Rendering engine</th> 
    <th>Browser</th> 
    <th>Platform(s)</th> 
    <th>Engine version</th> 
    <th>CSS grade</th> 
    </tr> 
    </tfoot> 
    <tbody> 
    <tr> 
    <td>Trident</td> 
    <td>Internet Explorer 4.0</td> 
    <td>Win 95+</td> 
    <td>4</td> 
    <td>X</td> 
    </tr> 
    <tr> 
    <td>Other browsers</td> 
    <td>All others</td> 
    <td>-</td> 
    <td>-</td> 
    <td>U</td> 
    </tr> 
    </tbody> 
    </table> 
    </div> 

</td> 
</tr> 
</table> 

</form> 

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 

$(document).ready(function() { 

    $('#example').dataTable({ 
    "sScrollX": "100%", 
    "sScrollXInner": "110%" 
    }); 

}); 

</SCRIPT>

Nguồn

2013-06-11 fjmdawg

Đây là câu chuyện có mã của bạn http://jsfiddle.net/CHPqb/1/ Bạn có thể giải thích rõ hơn về sự khác biệt giữa mã của bạn và ví dụ trên trang web datatables không? –

Fiddle của bạn hiển thị vấn đề chính xác. Ví dụ của họ không có bảng html bên ngoài. Nếu bạn loại bỏ các

và

trên và dưới div nó sẽ hoạt động đúng. – fjmdawg

Cố gắng sửa chiều rộng bảng bên ngoài http://jsfiddle.net/CHPqb/3/ –

Hãy thử điều này http://jsfiddle.net/CHPqb/23/

tôi đã thêm một mã css và thay vì sScrollXInner tôi thay đổi nó để scrollX: true

th, td { 
white-space: nowrap; 
} 

div.dataTables_wrapper { 
    width: 80%; 
    margin: 0 auto; 
} 

$('#example').dataTable({ 
    "sScrollX": "100%", 
    "scrollX": true 
});

Nguồn

2016-05-03 06:57:54 qwerzxcxyz

Thay vào đó nếu sử dụng "scrollX": đúng DataTable di chuyển bên trong div: <div class='scroll'></div>

Và thêm CSS: div.scroll { overflow:auto; }

Nguồn

2018-01-05 11:07:46

Datatables - Tiêu đề cột không di chuyển khi cuộn theo chiều ngang

Trả lời

Các vấn đề liên quan