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

Question

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

当浏览器窗口缩放到 100% 时，我得到如下显示:

任何关于如何将数据表配置为 100% 行为(请原谅双关语)并保持在边界内的建议将不胜感激。

表格代码如下:

<?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-->

数据表 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 为表格提供 100% 的宽度

#table_id{
    width : 100% !important
}

此外，autowidth 应始终为 false 才能正常工作。