Question

我有一个嵌套在另一个表中的表。外部表的thead有10列。 td内的每个tr的第一个tbody是正常的单元格。

单元格2到10实际上可以有几个动态创建的子行。我需要这些9（1到9）与父表的第2列到第10列对齐。我不知道如何在不改变我的整体结构的情况下实现这一目标，使其成为具有动态rowspan的单个表。第一栏。

这可视化非常复杂，所以这里有一个JSFiddle帮助。该子表应该一直跨越到父表的列'10'。

在我到目前为止转换整个架构之前，我想至少问一下我的方法是否可行。也许总的来说，如果我只是转换它会更容易。

Answer 1

var subTables = $("table").find("table");
var headerColumns = $("table:first").find("tr:first").find("th:not(:first)");
var widths = new Array();

for (i = 0; i < 9; i++){
     widths.push($(headerColumns.get(i)).width());
}

$.each(subTables.find("tr"), function(){
    var row = this;
    var rowCells = $(row).find("td");

    for (x = 0; x < 9; x++){
         var td = rowCells.get(x);

        if ($(td).width() > widths[x]){
               widths[x] =  $(td).width();
        }
    }
});

$.each(headerColumns, function(index){
    $(this).width(widths[index] + "px");
});

$.each(subTables.find("tr"), function(){
    var row = this;
    var rowCells = $(row).find("td");

    $.each(rowCells, function(index){
        $(this).width(widths[index] + "px");
    });
});

确保将colspans添加到外部表的单元格中。

<body>
    <div>
        <table>
            <thead>
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                    <th>6</th>
                    <th>7</th>
                    <th>8</th>
                    <th>9</th>
                    <th>10</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>test</td>
                    <td colspan="9">

基本上，您遍历所有单元格并确定该列的最大宽度。然后返回并设置该列中的所有单元格以匹配最大宽度。它不会是完美的，所以你需要稍微调整一下。它也不是最漂亮的选择。我认为将它移到一张桌子上可能会更好。

子表如何继承并与父表的列对齐？

1 个答案: