Как я могу сделать несколько HTML-таблиц одинаковой ширины столбца

Question

У меня есть несколько таблиц HTML.Каждая таблица имеет одинаковое количество столбцов, но с разными наборами данных в каждой ячейке.

 <table><tr>
     <td>Col 1 Table 1</td>
     <td>Col 2 Table 1</td>
     <td>Col 3 Table 1</td>
 </tr></table>

 <table><tr>
     <td>Col 1 Table 2</td>
     <td>Col 2 Table 2</td>
     <td>Col 3 Table 2</td>
 </tr></table>

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

По некоторым конкретным причинам я не могу объединить их в одну таблицу, поэтому я хочу посмотреть, есть ли в любом случае несколько таблиц.

Похоже на таблицы (независимо от того, какиеCSS, который я вставил) меняются в зависимости от данных в ячейке.

Есть предложения?

Answer 1

Как вы используете стиль CSS?Вы должны установить фиксированную ширину для ячеек в первой строке каждой таблицы .

<table>
  <tr>
    <td style="width:100px"></td>
    <td style="width:120px"></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
 </tr>
</table>

Изменить: Конечно, лучше использовать классы CSS, но вы можете изменить это, как только увидите, работает ли он для вас.

<table>
  <tr>
    <td class="c1"></td>
    <td class="c2"></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
 </tr>
</table>
<!-- ... -->
<table>
  <tr>
    <td class="c1"></td>
    <td class="c2"></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
 </tr>
</table>

и т. Д.

Answer 2

Для большей гибкости я бы предоставил каждому столбцу свой собственный класс.

CSS

.column-1 {
  width: 100px;
}
.column-2 { 
  width: 300px;
}
.column-3 {
  width: 225px;
}

HTML

<table><tr>
    <td class="column-1">Col 1 Table 1</td>
    <td class="column-2">Col 2 Table 1</td>
    <td class="column-3">Col 3 Table 1</td>
</tr></table>

<table><tr>
    <td class="column-1">Col 1 Table 2</td>
    <td class="column-2">Col 2 Table 2</td>
    <td class="column-3">Col 3 Table 2</td>
</tr></table>

Если у вас есть возможность использовать CSS3, вы также можете использовать селектор nth-child, чтобы добиться этого, что сократит объем HTML, который вам нужно написать.

Answer 3

Применение фиксированной ширины к элементам <td> должно работать. Если это не работает для вас, возможно, есть стиль, переопределяющий указанный вами стиль, или у вас есть синтаксическая ошибка в вашем CSS. Вы забыли единицы измерения (например, px, em)? Используйте Firebug (или аналогичный инструмент), чтобы определить, какие стили применяются / переопределяются. Как правило, что-то похожее на это должно работать:

td {
    width: 200px;
}

Я не знаю, возможно ли это для вашей кодовой базы, но другой вариант - указать одну таблицу с несколькими <tbody> элементами. Как это:

<table>

<tbody><tr>
     <td>Col 1 Table 1</td>
     <td>Col 2 Table 1</td>
     <td>Col 3 Table 1</td>
 </tr></tbody>

 <tbody><tr>
     <td>Col 1 Table 2</td>
     <td>Col 2 Table 2</td>
     <td>Col 3 Table 2</td>
 </tr></tbody>

 </table>

Любая разметка, появляющаяся между вашими двумя таблицами, должна также быть частью большой таблицы. Вы можете поместить это содержимое в 3-й элемент <tbody>, содержащий только одну строку и одну ячейку, если это необходимо. Опять же, я не уверен, насколько хорошо ваша кодовая база может быть использована для этого рефакторинга, но я выкладываю это как опцию.

Answer 4

Попробуйте использовать javascript после загрузки таблиц.

Answer 5

Я уверен, что с css вы можете сделать это:

td { width: 200px }