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

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

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

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

Ответ 1

Это возможно только в том случае, если вы можете фиксировать ширину столбцов. Если вы можете установить фиксированную ширину, тогда будет работать некоторый 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%;
}

Ответ 2

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

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

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

Ответ 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;

Ответ 4

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

td { width: 250px }

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

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 }
...

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

Возможно, вы также можете сходить с ума с помощью селектора 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  */
...

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

Ответ 5

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

Ответ 6

Ответ Луиса Сикота - тот, который я использовал. Однако вместо использования clientWidth вы должны использовать функцию jquery width() для нормализации ширины между браузерами и не вычислять заполнение. Использование clientWidth приведет к тому, что ячейки таблицы будут расширяться на ajaxpostbacks из-за заполнения (если заполнение используется в 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();

Ответ 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>

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

Ответ 8

каждая пара таблиц меняет размеры своих столбцов на одну ширину
подобно Ole J. Helgesen, но с 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';
    }
  });
}