在多个表中水平对齐行使用网络的用户控制

Question

我需要在被水平布局不同表对齐的行。我宁愿把HTML代码在一个Web用户控件，所以我可以作为控制的多个实例创建，因为我想和水平布置它们。问题是，行中的文本需要换行。因此，一些行可以垂直扩展的一些可能会（见下面的例子）。当这种情况发生时，其他表中的行未水平对齐。我知道我可以通过使用单个表完成这一切，但是这将意味着我不得不重复的姓名，地址和电话用HTML代码，而不是动态创建我的用户控制的新实例（在现实中还有很多比更多的领域这一点，但我保持简单）。有没有办法用div的，表或其它的东西来做这是否？

下面的问题：玛丽珍的地址字段扩展2线，造成她的手机领域不与约翰和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

只是让每个人都知道，这是可能的。我使用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>

Answer 2

渲染你的数据，然后使用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>