包含 div @ 100% 缩放的数据表溢出

Question

问题似乎与数据tables（基于jquery）显示有关。使用的浏览器是chrome。当浏览器缩放设置为 90% 时，我得到了一个完美的显示，数据 table 正确地包含在包含 div 中（下图）

当浏览器 window 缩放到 100% 时，我得到如下显示：

任何关于如何配置数据table以 100% 表现（请原谅双关语）并保持在边界内的建议将不胜感激。

table的代码如下：

<?php
$year = date('Y');
printf("<div class='grid_container'>\n");
?>
 <table id='table_id' data-order='[[1, "asc"]]' data-page-length='25'  class='display row-border'>
    <thead>
        <tr>
            <th class='hide'>Id</th>
            <th></th>
            <th>Name</th>
            <th>DoB</th>
            <th>Class</th>
            <th>Regd On</th>
            <th>Priority</th>
            <th>Status</th>
            <th>Siblings</th>
            <th></th>
        </tr>
    </thead>
<?php 
   $i = 1;
foreach ($WLDetails['Students'] as $student) {
    //print_r($student);
    printf("<tr>\n");
        printf("<td class='hide'>%d</td>\n", $student->StudentId);
        printf("<td class='details-control'></td>\n");
        printf("<td>%s</td>\n",        anchor(sprintf("Sclass/WaitListEdit/%d",$student->StudentId),sprintf("%s", $student->StudentName)));
        printf("<td>%s</td>\n", $student->BirthDate);
        printf("<td>%s</td>\n", $student->Class);
        printf("<td>%s</td>\n", $student->RegisteredOn);
        printf("<td>%s</td>\n", wl_priority_desc($student->Priority));
        printf("<td>%s</td>\n", $student->Status);
        printf("<td>%s</td>\n", abbrClassNames($student->Siblings));
         printf("<td class='print_info'>%s</td>\n",  anchor_popup(sprintf("Sclass/InformLetter/%d",$student- >StudentId),img(array('src'=>base_url('application/img/printer.png'),   'border'=>'0', 'alt'=>'Img'))));
    printf("</tr>\n");
   }
    printf("</table>\n");
    printf("</div><!-- end grid_container-->\n");
   ?>
   </div> <!--maincontainer-->

数据table jquery代码为：

$(window).load(function() {
    var table = $('#table_id').DataTable({
        //"font-size" : 2em,
        "autowidth" : false,
        "columnDefs" : [ {
            className : "details-control",
            "targets"  : [1],
            "orderable" : false },
            {
            "targets" : [2,6],
            "width" : "25%",
            className : "dt-left"},
            { 
            "targets" : [3,4,5,7],
            "width" : "10%",
            className : "dt-center"},
            { 
            "targets" : [9],
            className : "print_info",
            "orderable" : false}
            ]
       });

非常感谢:)

Answer 1

您可以使用 css

为 table 提供 100% 的宽度

#table_id{
    width : 100% !important
}

另外 autowidth 应该始终是 false 才能正常工作。

包含 div @ 100% 缩放的数据表溢出

datatable overflows containing div @ 100% zoom

html

javascript

css

datatable

jquery