Как сделать несколько таблиц html с одинаковой шириной столбцов

У меня есть несколько таблиц 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, который я вставляю) изменяются на основе данных, которые находятся в ячейке.

какие предложения?

6
html html-table width

5 ответов

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

в 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, которое вам нужно будет написать.

1

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

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

Edit: конечно, лучше использовать классы 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>

etc..

2

применение фиксированной ширины с <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>

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

1

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

td { width: 200px }
0

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

-1