Любой способ синхронизировать ширину столбцов таблицы с HTML + CSS?

Question

У меня есть несколько таблиц с одинаковыми столбцами, и было бы намного лучше, если бы они имели одинаковую ширину столбцов. Это возможно? Поместить их в одну таблицу с несколькими строками без границ между ними - не вариант.

Редактировать: Да, я знаю, что могу исправить ширину самостоятельно, но я надеялся на что-то, что связало бы с алгоритмом ширины столбца браузера, но просто связал две или более таблицы вместе с целью делать этот макет.

Я не думал, что это возможно, но я решил проверить на всякий случай.

Answer 1

Если вы не слишком требовательны к ширине столбцов, которые предлагает браузер, если они одинаковы для разных таблиц, вы можете использовать свойство CSS table-layout (поддерживается все основные браузеры) в сочетании с шириной таблицы:

table {
    table-layout: fixed;
    width: 100%;
}

Это приводит к тому, что все столбцы (без указанной ширины) имеют одинаковую ширину, независимо от содержимого таблицы.

Answer 2

Это возможно, только если вы можете фиксировать ширину столбцов. Если вы можете установить фиксированную ширину, тогда некоторые CSS должны работать так:

td {
    width: 25%;
}

Вы можете настроить ширину каждого столбца следующим образом:

<table>
  <tr>
    <td class="col1">...</td>
    <td class="col2">...</td>
  </tr>
</table>
...
<table>
  <tr>
    <td class="col1">...</td>
    <td class="col2">...</td>
  </tr>
</table>

, а затем укажите ширину следующим образом:

.col1 {
   width: 25%;
}
.col2 {
   width: 75%;
}

Answer 3

Вот небольшой JavaScript, который я сделал, чтобы изменить размеры ячеек, чтобы сделать их равными по ширине во всех таблицах на странице.

function resizeTables()
{
    var tableArr = document.getElementsByTagName('table');
    var cellWidths = new Array();

    // get widest
    for(i = 0; i < tableArr.length; i++)
    {
        for(j = 0; j < tableArr[i].rows[0].cells.length; j++)
        {
           var cell = tableArr[i].rows[0].cells[j];

           if(!cellWidths[j] || cellWidths[j] < cell.clientWidth)
                cellWidths[j] = cell.clientWidth;
        }
    }

    // set all columns to the widest width found
    for(i = 0; i < tableArr.length; i++)
    {
        for(j = 0; j < tableArr[i].rows[0].cells.length; j++)
        {
            tableArr[i].rows[0].cells[j].style.width = cellWidths[j]+'px';
        }
    }
}

window.onload = resizeTables;

Answer 4

Луис Сиквот - это тот ответ, который я использовал. Однако вместо clientWidth вы должны использовать функцию jquery width (), чтобы нормализовать ширину между браузерами и не вычислять отступы. Использование clientWidth приведет к расширению ячеек таблицы на ajaxpostback из-за заполнения (если заполнение используется в TD). Таким образом, правильный код, использующий ответ Луиса Сиквота, должен был заменить

var cell = $(this)[0].rows[0].cells[j];
       if(!cellWidths[j] || cellWidths[j] < cell.clientWidth) cellWidths[j] = cell.clientWidth;

с

var cell = $($(this)[0].rows[0].cells[j]);
            if (!cellWidths[j] || cellWidths[j] < cell.width()) cellWidths[j] = cell.width();   

Answer 5

Я почти в шоке, что никто не предложил группы столбцов ! С его помощью вы можете присвоить столбцу определенный класс, ширину и другие полезные свойства. А поскольку это HTML 4.01, он поддерживается всеми браузерами, поддерживающими тип документа.

Answer 6

Чтобы расширить ответ Кена, вы также можете указать точную ширину в пикселях:

td { width: 250px }

или ems (ширина буквы м):

td { width: 32em }

или ex или pt или что-то еще (ну ... на самом деле это может быть%, pt, px, em, ex). Если вам нужно, чтобы ваши столбцы были разной ширины, то проще всего указать классы ячеек таблицы:

<table><tr>
    <td class="col1">...</td><td class="col2">...</td>...
</tr></table>

и назначьте ширину столбцов для классов:

td.col1 { width: 48em }
td.col2 { width: 200px }
...

Должно быть достаточно назначить ширину столбцов первой строке в каждой таблице. [править: похоже, что меня это зачерпнуло, пока я писал]

Возможно, вы также можете сойти с ума с селектором родного брата CSS 2 и написать что-то вроде

tr > td:first-child { width:48em } /* first column */
tr > td:first-child + td { width: 200px } /* second column */
tr > td:first-child + td + td { width: 5% } /* third column  */
...

но если у вас больше нескольких столбцов, это может стать уродливым. И если вы используете какую-то систему шаблонов или скрипт для генерации этих таблиц, я уверен, что будет проще / понятнее просто поставить атрибут class = "col #" в каждую ячейку вашего шаблона один раз.

Answer 7

Самый простой способ - это «грязный» способ, но он работает лучше всего. Это именно то, что требуется:

Просто объедините две таблицы в одну таблицу. В моем случае единственной вещью между двумя таблицами была h3

Итак, мой стол

<table>
<tr></tr>
<table>

<h3>Title<h3>

<table>
<tr></tr>
<table>

стало так:

<table>
<tr></tr>

<tr><td colspan="6">
<h3>Title<h3>
</td></tr>

<tr></tr>
<table>

таким образом ваша таблица будет синхронизироваться по размеру. конечно, это работает только тогда, когда между двумя таблицами не слишком много сложных вещей, но я предполагаю, что в большинстве случаев это не так. если бы это было так, синхронизация не потребовалась бы в первую очередь.

Answer 8

каждая пара таблиц изменяет размер столбцов до одинаковой ширины
аналогично Оле Дж. Хельгесену , но с jquery и параметром для выбора выравниваемых таблиц. (Я не могу голосовать, но это по сути ваше решение)

<table data-ss="1" border="1">
  <tr><td>asdf<td>129292<td>text
</table>
<table data-ss="1" border=1>
  <tr><td>a<td>1<td>each column here has the same size than the table above
</table>
<table data-ss="2" border=1>
  <tr><td>asdf<td>129292<td>text
</table>
<table data-ss="2" border=1>
  <tr><td>each column here has the same size than the table above<td>a<td>1
</table>

и используйте этот sctipt

$(function(){
  resizeTables('1');
  resizeTables('2');
});

//please set table html attribute `data-ss="something"` to properly call this js
// ss is short for SharedSize
function resizeTables(sharedSize){
  var tableArr = $('table[data-ss='+sharedSize+']');
  var cellWidths = new Array();
  $(tableArr).each(function() {
    for(j = 0; j < $(this)[0].rows[0].cells.length; j++){
       var cell = $(this)[0].rows[0].cells[j];
       if(!cellWidths[j] || cellWidths[j] < cell.clientWidth) cellWidths[j] = cell.clientWidth;
    }
  });
  $(tableArr).each(function() {
    for(j = 0; j < $(this)[0].rows[0].cells.length; j++){
        $(this)[0].rows[0].cells[j].style.width = cellWidths[j]+'px';
    }
  });
}