Таблица Ширина столбца должна быть одинаковой для двух таблиц

Существуют две таблицы шириной 600 пикселей и 5 столбцов каждая. Но для каждого столбца ширина не задана. Здесь я хочу, чтобы ширина столбцов была одинаковой в обеих таблицах. Вы можете использовать CSS или jQuery. И я не хочу исправлять ширину столбца вручную.

Пример HTML:

<table width="600" border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td>hdng 1</td>
        <td>hdng 2</td>
        <td>hdng 3</td>
        <td>hdng 4</td>
        <td>hdng 5</td>
    </tr>
</table>
<table width="600" border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td>content content content</td>
        <td>con</td>
        <td>content content content</td>
        <td>content content content</td>
        <td>content content content</td>
    </tr>
</table>

Любая помощь будет высоко оценена.

Ответы

Ответ 1

Если вы хотите, чтобы все столбцы имели одинаковую ширину, и поскольку вы уверены, что в каждой таблице будет ровно пять столбцов, я бы предложил:

<table style="table-layout:fixed">
<col style="width:20%" span="5" />
<tr><!--stuffs...--></tr>
</table>

Ответ 2

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

Пример HTML можно найти в этом ответе fooobar.com/questions/14733/...

Ответ 4

Если вы знаете, что каждая таблица будет иметь ровно 5 столбцов, применение width: 20% - лучший выбор:

td {
    width: 20%;
}

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

Вот JSFiddle demo. Я изменил HTML, чтобы добавить id="first" в первую таблицу, чтобы я мог получить конкретную ссылку на него. Тогда JavaScript выглядит так:

var num = $("table#first tr:first-child > td").length;
var width = (100 / num) + "%";

$("td").css("width", width);​

В основном он захватывает первую строку таблицы #first и подсчитывает количество столбцов. Затем он находит соответствующую процентную ширину для этого количества столбцов. Затем он применяет эту ширину ко всем элементам <td>.

Это будет работать до тех пор, пока на td s не будет colspan, что бы сбросить счет столбца. Столбцы будут равны, так как вы указали явную ширину в обеих таблицах.

Ответ 5

Определите любой класс css и отформатируйте его, а затем используйте этот класс на обеих таблицах e-g

ваш temp.css

.anyClass tr td{
width: 150p;
etc...
}

и в файле HTML

    <table id="table1" class="anyClass">

        ......
        ......
        </table>

        <table id="table2" class="anyClass">        
        ......
        ......
        </table>

Ответ 6

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

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

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

Ширина таблицы и столбца задается шириной таблицы и col элементов или по ширине первой строки ячеек. Клетки в последующие строки не влияют на ширину столбцов. Под "фиксированной" компоновкой метод, вся таблица может быть отображена, как только первая строка таблицы был загружен и проанализирован. Это может ускорить время рендеринга метод автоматической компоновки, но последующее содержимое ячейки может не вписываются в ширину столбцов. Ячейки используют свойство переполнения для определить, следует ли клип переполнять содержимое, но только если таблица имеет известную ширину; в противном случае они не будут переполнять ячейки.

CSS

table{
    table-layout:fixed; /* same width will be applied to both the tables*/
}
table td {
    width:20%;  /*20% width for 5 td elements*/
}

для получения дополнительной информации https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

Ответ 7

Привет, теперь используется css, как это показано

table td {
    width:125px;
}