如何对齐两个html表之间的列？

Question

我有以下由 ASP.net GridView 控件生成的表格：

<!-- TOP TABLE WITH DROPDOWNS -->
<table class="taskGridView">
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

<!-- BOTTOM DATA TABLE -->
<table id="yourTasksGV">
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

显示这个：

如您所见，第一个表格（带有下拉菜单）未与底部表格对齐。

我在windows.load() 事件中有以下代码来匹配两个表之间的每一列：

var firstCol = $("#yourTasksGV").find("tr > td:first").width();
$(".taskGridView").find("tr > td:first").width(firstCol + "px");

var secondCol = $("#yourTasksGV").find("tr > td:second").width();
$(".taskGridView").find("tr > td:second").width(secondCol + "px");

var thirdCol = $("#yourTasksGV").find("tr > td:third").width();
$(".taskGridView").find("tr > td:third").width(thirdCol + "px");

var fourthCol = $("#yourTasksGV").find("tr > td:fourth").width();
$(".taskGridView").find("tr > td:fourth").width(fourthCol + "px");

var fifthCol = $("#yourTasksGV").find("tr > td:fifth").width();
$(".taskGridView").find("tr > td:fifth").width(fifthCol + "px");

var sixthCol = $("#yourTasksGV").find("tr > td:sixth").width();
$(".taskGridView").find("tr > td:sixth").width(sixthCol + "px");

var seventhCol = $("#yourTasksGV").find("tr > td:seventh").width();
$(".taskGridView").find("tr > td:seventh").width(seventhCol + "px");

var eighthCol = $("#yourTasksGV").find("tr > td:eighth").width();
$(".taskGridView").find("tr > td:eighth").width(eighthCol + "px");

var ninthCol = $("#yourTasksGV").find("tr > td:ninth").width();
$(".taskGridView").find("tr > td:ninth").width(ninthCol + "px");

页面加载时，列仍未对齐。

如何修改/添加到现有代码以使两个表都对齐所需的结果？另外，如果任一表中的任何列发生更改，我该如何编码，从下拉选择中选择一个选项，两个表中的列都会调整？

Answer 1

让两个表完全匹配绝非易事。可以这样做，但是您必须跟踪其中任何一个的更改并在更改时将它们应用于另一个。这将是一场失败的战斗。

我会通过以下两种方式之一来完成：

1) 使用一个插件，为您提供您似乎正在寻找的所有功能，这将节省您的时间和心痛，而且由于前端数据模型，它的运行速度比在后端过滤要快得多。我的首选是 jQuery 数据表。 Here's an example that does column filtering with inputs at the bottom - 但如果需要，很容易将搜索附加到顶部而不是底部。这种方法的美妙之处在于它与后端无关，因此它可以通过 php、java、.net 等运行。

2) 如果您想通过另一种更手动的方法（我不推荐）进行所有过滤，只需制作一个表格，然后将您的过滤器设置为具有自己的类的一行，您可以将其用于样式设置。

Answer 2

您应该使用 HTML 的 <thead> 和 <tbody> 来保持这些信息一致：

<!-- BOTTOM DATA TABLE -->
<table id="yourTasksGV">
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>