Question

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

当broswer窗口缩放到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代码是：

＆＃13;

$(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}
            ]
       });

＆＃13;

非常感谢！）

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

0 个答案: