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>

显示：

enter image description here

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

我在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 Datatables。 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>

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

2 个答案: