如果增加表头超过20个，jQuery可调整大小的列是不合适的吗？

时间：2018-11-15 06:26:09

标签： jquery css

我有一张40列的桌子。 jQuery Resize能够在10列上正常工作，但是如果我增加列数，那么列将重叠。

如何防止这种情况？有没有我可以使用的CSS或另一个可以正常工作的jquery调整大小功能。

这是我的代码。 

            $(document).ready(function () {
                $("#tbl_AutoBidding").colResizable({
                    fixed: false,
                    liveDrag: true,
                    draggingClass: "dragging"
                });
            });
table.gridMedium {background: #d2d2d2 !important;background-color: #d2d2d2 !important;border: 0px !important;}
        table.gridMedium tr td,
        div.gridMedium table tr td,
        table.gridMedium thead tr th,
        div.gridMedium table thead tr th {padding:2px !important;font-size: 11px !important;text-align:left;line-height:normal !important;}
    
        table.gridMedium tr th,
        div.gridMedium table tr th {
         background: #e0dfdf;
         
         }
         #dv_AutoBiddingtable table thead tr th, #dv_AutoBiddingtable table tbody tr td { white-space: nowrap !important; text-align: center; padding: 3px !important; }
    <!DOCTYPE html>
    
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Resizable - Helper</title>

    </head>
    <body>
    
        <div class="small-12 columns" id="dv_AutoBiddingtable" style="overflow-x:auto">
            <table class="gridMedium" id="tbl_AutoBidding" cellpadding="0" cellspacing="1" width="100%" border="0">
                <thead>
                    <tr>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                        <th> LandMark Address </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                    </tr>
                </tbody>
    
            </table>
           
        </div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/colresizable@1.6.0/colResizable-1.6.min.js" integrity="sha256-30OwSkLQCI3YsS9+88BMLSdDwa8AmswHozG45NpOmDA=" crossorigin="anonymous"></script>
    </body>
    </html>

有什么建议吗？ ................................................... ................................................... ................................................... ...

2 个答案:

答案 0 :(得分：1)

要设置初始宽度，您必须在每个HTML列上添加width属性（使用CSS可以不能完成），例如

<th width="50px"> LandMark Address </th>

要设置打开时列的最小宽度，请添加minwidth选项

$(document).ready(function () {
    $("#tbl_AutoBidding").colResizable({
           fixed: false,
           minwidth: 100, //set the minimum width
           liveDrag: true,
           draggingClass: "dragging"
     });
});

这是您被窃听的工作示例： 

$(document).ready(function () {
                $("#tbl_AutoBidding").colResizable({
                    fixed: false,
                    minwidth: 100,
                    liveDrag: true,
                    draggingClass: "dragging"
                });
            });
table.gridMedium {background: #d2d2d2 !important;background-color: #d2d2d2 !important;border: 0px !important;}
        table.gridMedium tr td,
        div.gridMedium table tr td,
        table.gridMedium thead tr th,
        div.gridMedium table thead tr th {padding:2px !important;font-size: 11px !important;text-align:left;line-height:normal !important;}
    
        table.gridMedium tr th,
        div.gridMedium table tr th {
         background: #e0dfdf;
         
         }
         #dv_AutoBiddingtable table thead tr th, #dv_AutoBiddingtable table tbody tr td { white-space: nowrap !important; text-align: center; padding: 3px !important; }
<!DOCTYPE html>
    
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Resizable - Helper</title>

    </head>
    <body>
    
        <div class="small-12 columns" id="dv_AutoBiddingtable" style="overflow-x:auto">
            <table class="gridMedium" id="tbl_AutoBidding" cellpadding="0" cellspacing="1" width="100%" border="0">
                <thead>
                    <tr>
                        <th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
<th width="50px"> LandMark Address </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                        <td> LandMark Address </td>
                    </tr>
                </tbody>
    
            </table>
           
        </div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/colresizable@1.6.0/colResizable-1.6.min.js" integrity="sha256-30OwSkLQCI3YsS9+88BMLSdDwa8AmswHozG45NpOmDA=" crossorigin="anonymous"></script>
    </body>
    </html>

答案 1 :(得分：0)

我得到了答案。它比列更有效。

在th中添加了div元素

<th><div>#</div></th>

1。调整列大小

$("#thead_DispatchTrip th").resizable({
        handles: "e",
        resize: function (event, ui) {
            $(ui.element).find('div').width(ui.size.width);
        }
    });
相关问题
最新问题