Горизонтальное выравнивание строк в нескольких таблицах с помощью веб-элемента управления

Question

Мне нужно выровнять строки в разных таблицах, которые расположены горизонтально. Я бы предпочел поместить HTML-код в один пользовательский веб-элемент управления, чтобы я мог создать столько экземпляров этого элемента управления, сколько захочу, и расположить их горизонтально. Проблема в том, что текст в строках нужно переносить. Поэтому некоторые строки могут расширяться по вертикали, а некоторые - нет (см. Пример ниже). Когда это происходит, строки в других таблицах не выравниваются по горизонтали. Я знаю, что могу сделать все это, используя одну таблицу, но это означало бы, что мне пришлось бы дублировать html-код имени, адреса и телефона вместо динамического создания новых экземпляров моего пользовательского элемента управления (на самом деле полей намного больше это, но я держу это просто). Есть ли способ сделать это с помощью div, таблиц или чего-то еще?

Вот проблема: поле адреса Мэри Джейн расширяется на 2 строки, в результате чего ее поле телефона не совпадает с полями Джона и Боба.

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), но я бы предпочел использовать один веб-элемент управления, который я создаю X раз во время разработки (в этом примере это 3 раз). Я использую VS2008, а .Net 3.5

Answer 1

Просто чтобы все знали, это возможно. Я закончил решение с помощью jquery, и оно работает довольно хорошо. Я назначил каждой таблице определенный класс CSS и использовал его, чтобы определить, какие таблицы необходимо изменить в размере (не хочу использовать идентификатор, поскольку каждая из них должна быть уникальной). Работает в 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;
    }
}

Вот код для запуска процесса. Добавьте его на главную страницу, а не в веб-элемент управления (если вы используете .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>