Question

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

问题在于：Mary Jane的地址字段扩展了2行，导致她的手机字段与John和Bob没有正确对齐。

Name:  John Doe           Name: Mary Jane                   Name: Bob Smith

Address: 123 broadway     Address: Some really long address Address: Short address

Phone: 123-456            that takes up multiple lines      Phone: 111-2222

                          Phone: 456-789

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

Answer 1

渲染数据，然后使用javascript（jQuery please）客户端查找所有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>

Answer 2

大家都知道，这是可能的。我使用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>

使用Web用户控件水平对齐多个表中的行

2 个答案: