Question

我正在尝试使用可调整大小的列和固定标头创建一个表。但是当我试图拖动标题列时，表格列会改变它们的大小，但会创建一些空隙。

例如： initial

拖动后得到的结果： dragged

我的样本：

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

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


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

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

    };

    resFun();
});
</script>

<div style="padding-right: 17px; height: 39px;">
    <table class="table table-bordered" id="tableHeader" style="width: 100%; height: 39px;">
        <tr>
            <th id="c1">first</th>
            <th id="c2">second</th>
            <th id="c3">third</th>
        </tr>
    </table>
</div>
<div style="overflow: auto; height: 200px;">
    <table class="table table-bordered" id="table">
        <tr>
            <td class="c1">col 1</td>
            <td class="c2">col 2</td>
            <td class="c3">col 3</td>
        </tr>
        <tr>
            <td class="c1">col 1</td>
            <td class="c2">col 2</td>
            <td class="c3">col 3</td>
        </tr>
        <tr>
            <td class="c1">col 1</td>
            <td class="c2">col 2</td>
            <td class="c3">col 3</td>
        </tr>
        <tr>
            <td class="c1">col 1</td>
            <td class="c2">col 2</td>
            <td class="c3">col 3</td>
        </tr>
        <tr>
            <td class="c1">col 1</td>
            <td class="c2">col 2</td>
            <td class="c3">col 3</td>
        </tr>
        <tr>
            <td class="c1">col 1</td>
            <td class="c2">col 2</td>
            <td class="c3">col 3</td>
        </tr>
        <tr>
            <td class="c1">col 1</td>
            <td class="c2">col 2</td>
            <td class="c3">col 3</td>
        </tr>
        <tr>
            <td class="c1">col 1</td>
            <td class="c2">col 2</td>
            <td class="c3">col 3</td>
        </tr>
    </table>
</div>

Answer 1

问题是第二个表的单元格有一个填充集，而标题的单元格也没有..添加填充到标题也应该没问题

具有固定标题的可调整大小的列表

1 个答案: