Question

我正在尝试创建一个带有固定标题的表，列应该可以调整大小。

但是每当试图调整大小时，它并不完全准确对齐。它在chrome中打破了更多。

来自 - Resizable columns tables with fixed header

加载页面 -

但是在尝试调整列的大小时 -

Followin是我的页面 -

<html>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="http://www.bacubacu.com/colresizable/js/colResizable-1.5.min.js"></script>


<!--
<link href="http://www.bacubacu.com/colresizable/css/main.css" rel="stylesheet" />  -->

<style>
    table {
            border-collapse: collapse; /* make simple 1px lines borders if border defined */
            table-layout: fixed;
                font-size: 11px;
            font-family: Arial,Helvetica,sans-serif !important;
        }


    td{
        overflow:hidden;
        text-overflow: ellipsis;border:1px solid #ddd;
    }

    tr:hover {
    background-color: rgba(176, 225, 250, 0.48) !important;
}


    th {
        white-space: nowrap !important;border:1px solid #ddd;
    }

    td {
        white-space: nowrap !important;
    }

    .c1{
        width: 10%;
    }

    .c2,.c3{
        width: 18%;
    }

    .c4,.c5,.c6{
        width: 18%;
    }


    #c1{
        width: 10%;
    }

    #c2,#c3{
        width: 18%;
    }

    #c4,#c5,#c6{
        width: 18%;
    }

</style>



<script>
$(document).ready(function(){

    $('#tableHeader').colResizable({
        fixed:false,
        liveDrag: true,
        onDrag: resFun
    });

    /*
     $('.c1').width('20%');
     $('.c2').width('40%');
     $('.c3').width('40%');
*/

    function resFun() {
        var c1 = $('#c1').width();
        var c2 = $('#c2').width();
        var c3 = $('#c3').width();

        var c4 = $('#c4').width();
        var c5 = $('#c5').width();
        var c6 = $('#c6').width();

        $('.c1').width(c1);
        $('.c2').width(c2);
        $('.c3').width(c3);


        $('.c4').width(c4);
        $('.c5').width(c5);
        $('.c6').width(c6);

    };

    resFun();
});
</script>

<div style="width:70%">

<div style="height: 39px;">
    <table class="" id="tableHeader" style="width: 100%; height: 39px;" cellpadding="3" cellspacing="0">
        <tr>
            <th id="c1">first</th>
            <th id="c2">second</th>
            <th id="c3">third</th>

            <th id="c4">Fourth</th>
            <th id="c5">Fifth</th>
            <th id="c6">Sixth</th>
        </tr>
    </table>
</div>
<div style="overflow: auto; height: 200px;" cellpadding="3" cellspacing="0">
    <table class="" id="table">
        <tr>
            <td class="c1">col 1</td>
            <td class="c2">col 2</td>
            <td class="c3">col 3</td>


             <td class="c4">col 1</td>
            <td class="c5">col 2</td>
            <td class="c6">col 3</td>


        </tr>
        <tr>
            <td class="c1">col 1</td>
            <td class="c2">col 2</td>
            <td class="c3">col 3</td>

          <td class="c4">col 1</td>
            <td class="c5">col 2</td>
            <td class="c6">col 3</td>

        </tr>
        <tr>
            <td class="c1">col 1</td>
            <td class="c2">col 2</td>
            <td class="c3">col 3</td>


            <td class="c4">col 1</td>
            <td class="c5">col 2</td>
            <td class="c6">col 3</td>

        </tr>
        <tr>
            <td class="c1">col 1</td>
            <td class="c2">col 2</td>
            <td class="c3">col 3</td>

            <td class="c4">col 1</td>
            <td class="c5">col 2</td>
            <td class="c6">col 3</td>


        </tr>
        <tr>
            <td class="c1">col 1</td>
            <td class="c2">col 2</td>
            <td class="c3">col 3</td>

            <td class="c4">col 1</td>
            <td class="c5">col 2</td>
            <td class="c6">col 3</td>
        </tr>
        <tr>
            <td class="c1">col 1</td>
            <td class="c2">col 2</td>
            <td class="c3">col 3</td>

           <td class="c4">col 1</td>
            <td class="c5">col 2</td>
            <td class="c6">col 3</td>
        </tr>
        <tr>
            <td class="c1">col 1</td>
            <td class="c2">col 2</td>
            <td class="c3">col 3</td>

            <td class="c4">col 1</td>
            <td class="c5">col 2</td>
            <td class="c6">col 3</td>
        </tr>
        <tr>
            <td class="c1">col 1</td>
            <td class="c2">col 2</td>
            <td class="c3">col 3</td>

            <td class="c4">col 1</td>
            <td class="c5">col 2</td>
            <td class="c6">col 3</td>
        </tr>
    </table>
</div>

</div>

</html>

Answer 1

调用resFun()函数时，为标题设置固定宽度。每次触发resize事件时都应该调用该函数。您可以使用jquery代码调整窗口大小时调用该函数：

$(window).resize(resFun);

HTML中

1 个答案: