0

我需要对齐水平布局的不同表中的行。我更愿意将 html 代码放在单个 Web 用户控件中，这样我就可以根据需要创建尽可能多的该控件的实例并将它们水平放置。问题是，行中的文本需要换行。所以有些行可能会垂直扩展，有些可能不会（见下面的例子）。发生这种情况时，其他表中的行不会水平对齐。我知道我可以通过使用单个表来完成所有这些，但这意味着我必须复制姓名、地址和电话 html 代码，而不是动态创建我的用户控件的新实例（实际上有比这个，但我保持简单）。有没有办法做到这一点，无论是使用 div、表格还是其他东西？

问题出在：Mary Jane 的地址字段扩展了 2 行，导致她的电话字段与 John 和 Bob 的不正确对齐。

姓名：John Doe 姓名：Mary Jane 姓名：Bob Smith
地址：123 Broadway 地址：一些很长的地址 地址：短地址
电话：123-456，占用多条线路电话：111-2222
                          电话：456-789

我没有以任何方式限制如何执行此操作（除了使用 asp.net），但我更喜欢使用在设计时实例化 X 次的单个 Web 控件（在此示例中，它是 3 次）。我正在使用 VS2008 和 .Net 3.5

4

2 回答 2

0

众所周知，这是可能的。我使用 jquery 完成了解决方案，并且效果很好。我为每个表分配了一个特定的 css 类，并用它来确定哪些表需要调整大小（不想使用 id，因为每个表都必须是唯一的）。它适用于 4 种主要浏览器。对于 IE7，请确保在空单元格中添加一个空格以使其正常工作。这是Javascript：

function ResizeTableRows() {
    // select tables by css class name using jquery
    var tables = $('.myCssClassName');

    // all tables should have the save number of rows, so just use the first one
    var totalRows = tables[0].rows.length;

    for (var rowNumber = 0; rowNumber < totalRows; rowNumber++) {
        var maxRowHeight = GetMaxRowHeight(tables, rowNumber);

        for (var i = 0; i < tables.length; i++) {
            if (maxRowHeight > 0) {
                tables[i].rows[rowNumber].height = maxRowHeight;
                SetCellHeight(tables[i].rows[rowNumber].cells, maxRowHeight);
            }
        }
    }
}

function GetMaxRowHeight(tables, rowNumber) {
    var maxRowHeight = 0;

    for (var i = 0; i < tables.length; i++) {
        var row1 = tables[i].rows[rowNumber];
        var cell1 = row1.cells[0];
        var rowHeight = row1.clientHeight;

        if (rowHeight <= 0) {
            rowHeight = row1.height;
        }        
        if (rowHeight <= 0) {
            rowHeight = cell1.clientHeight;
        }        

        if (rowHeight > maxRowHeight) {
            maxRowHeight = rowHeight;
        }
    }
    return maxRowHeight;
}

function SetCellHeight(cells, maxRowHeight) {
    for (var i = 0; i < cells.length; i++) {
        cells[i].height = maxRowHeight;
    }
}

这是启动该过程的代码。将其添加到主页而不是 Web 控件（如果您使用的是 .net）

<script type="text/javascript">
    // runs automatically after this page has been loaded and rendered
    $(document).ready(function() {
        ResizeTableRows();
    });
</script>
于 2010-07-08T23:54:55.617 回答
0

渲染您的数据，然后使用 javascript（请使用 jQuery）客户端查找您的所有 td.address（例如）单元格，找到具有最大高度的单元格，并将所有其他单元格的高度设置为该单元格。你提到了其他领域，所以逻辑可能会涉及更多，但原则是成立的。

一些快速代码：

<script type="text/javascript">
  $(function() {
    var cells = $('td.address');
    var height;

    // some code to foreach on all relevant cells to find max size

     cells.each(function(index) {
       $(this).height(height));
    });
  });
</script>
于 2010-05-13T17:02:53.020 回答