javascript - 与手动设置单元格宽度不一致

Question

好的，所以我开始了一项古老的任务，即创建一个具有可滚动主体和固定头部的表格，并且我已经编写了对我来说应该有效的内容。在我进入这个问题之前，这是我的代码，以及一个 jsfiddle例子。

HTML:

<table class="table-scrollable" id="test">
    <thead>
        <tr>
            <th>Heading One</th>
            <th>Heading Two</th>
            <th>Heading Three</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>One</td>
            <td>Two (and some extra long content to make the columns off)</td>
            <td>Three</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
        </tr>
    </tbody>
</table>

Javascript(使用 JQuery)

$('table.table-scrollable').each(function () {
    $(this).before($('<div></div>').prop('class', $(this).prop('class')).prop('id', 'div_' + $(this).prop('id')));
    var newDiv = $('#div_' + $(this).prop('id'));
    newDiv.append($('<div></div>').prop('class', 'table-head'));
    newDiv.append($('<div></div>').prop('class', 'table-body'));
    newDiv.append($('<div></div>').prop('class', 'table-foot'));

    newDiv.children('div.table-head').append($('<table></table>').prop('class', $(this).prop('class')).append($('<thead></thead>').html($(this).children('thead').html())).append($('<tbody></tbody>').html($(this).children('tbody').html())));

    newDiv.children('div.table-body').append($('<table></table>').prop('class', $(this).prop('class')).append($('<tbody></tbody>').html($(this).children('tbody').html())));

    $(this).remove();

    // Now we need to set the widths of each cell in the header
    var HeaderItems = newDiv.find('thead tr th');
    var widths = new Array();
    HeaderItems.each(function (i, element) {
        // First, get the necessary width percentages
        widths[i] = (($(element).width() / $(element).parent().width()) * 100) + '%';
    });
    var css = "";
    for (var i = 0; i < widths.length; i++) {
        HeaderItems.eq(i).css('width', widths[i]);
    }
    newDiv.children('div.table-head').find('tbody').remove();
    CalculateScrollingBodyWidths(newDiv);
    $(window).resize(function () {
        CalculateScrollingBodyWidths(newDiv);
    });
});

function CalculateScrollingBodyWidths(divTable) {
    var styleId = divTable.prop('id') + '_style';
    var style = $('<style></style>').prop('id', styleId);

    var Headers = divTable.children('div.table-head').find('th');
    var css = "";
    var lastElementWidth = "";
    Headers.each(function (i, element) {
        css += 'div#' + divTable.prop('id') + ' div.table-body table tbody tr td:nth-child(' + (i + 1) + ') { width: ' + $(element).width() + 'px; }\n';
        lastElementWidth = $(element).width();
    });

    var pixelDiff = divTable.width() - divTable.children('div.table-body').find('tr').eq(0).width();

    css += 'div#' + divTable.prop('id') + ' div.table-body table tbody tr td:last-child { width: ' + (lastElementWidth - pixelDiff) + 'px; }\n';
    style.html(css);
    $('head style#' + styleId).remove();
    $('head').append(style);
}

还有一点 CSS:

div.table-scrollable div.table-body {
    max-height: 100px;
    overflow: auto;
}

这是它在我的实际元素中的样子的图像，您可以从中更容易地看到问题:

我不知道为什么这不起作用。尽管我明确设置了单元格的宽度，但其他一些东西正在覆盖我告诉它要做的事情。

我是否需要将单元格上的显示样式设置为其他样式？

Answer 1

我想通了!

我表格中的所有单元格都有填充，这以某种方式偏离了我手动设置的宽度，即使所有单元格的填充都相同 (8px)。

当我删除填充时，单元格对齐，但它们看起来不太好，所以我通过在表格中每个单元格的开头和结尾添加一个空格来模拟填充。

更好的解决方案可能是在每列之间和末尾添加一个新列，但我现在已经可以接受了。