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;
}

这是我在实际项目中看起来像的图片，在那里你可以更容易地看到问题：

enter image description here

我不知道为什么这不起作用。即使我明确地设置了单元格的宽度，其他东西也会覆盖我告诉它要做的事情。

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

Answer 1

我明白了！

我桌子上的所有单元格都有填充，即使所有单元格（8px）的填充相同，也会以某种方式抛弃我手动设置的宽度。

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

一个更好的解决方案是在每一列和两端之间添加一个新列，但是我现在已经可以使用它了。

Answer 2

不太确定这是否是你想要的。标题的默认对齐方式是居中。也许你想让它留下来？这是解决方案。

Fiddle

<强> CSS

th{
    text-align:left;
}

手动设置单元格宽度的不一致

2 个答案:

Fiddle