Как сделать так, чтобы столбцы дочерней таблицы имели такую ​​же ширину, что и столбцы родительской таблицы?

Question

У меня есть таблица в таблице (внутри тд).

Эта дочерняя таблица имеет ровно столько же столбцов, что и родительская таблица.

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

Вот как это выглядит:

Как мне оформить дочерний стол?

Есть ли предопределенный способ исправить это?

Или мне нужно написать функцию "нормализации" через jquery, которая изменит ширину столбцов при загрузке страницы?

Answer 1

Попробуйте использовать атрибут rowspan вместо таблиц вложенности.Если вам нужно, скажем, 3 набора данных, но вы хотите, чтобы все они имели одинаковый заголовок (с левой стороны), установите для диапазона строк этой левой ячейки значение 3 и оставьте для каждого из остальных значение по умолчанию, равное 1. Вы 'Вам нужно будет пренебречь добавлением этой ячейки для последующих строк.

См .: http://www.w3schools.com/tags/att_td_rowspan.asp

Answer 2

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

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

Answer 3

function normaliseWidth(id)
{
    iter = 1;
    $("#splitForm" + id + " td").each(function() {
        //alert($(this)); 
        $(this).width($("#" + id + " td:nth-child(" + iter + ")").width());
        ++iter;
    });
}

Я просто перебрал все td и изменил их ширину на ширину родителя.

Это, похоже, исправило это.Я надеюсь, что не будет никаких побочных эффектов.Спасибо за помощь.

Answer 4

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

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

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

Answer 5

Ответ - пара разных вещей.

самый быстрый способ - добавить классы в каждый столбец (и убедиться, что они соединены между родителем и потомком). Я обычно использую префикс "col-". Установите ширину для классов, и вы должны быть намного ближе.

Также обязательно удалите все границы, отступы, поля и т. Д., Если это все еще не совсем правильно, посмотрите на border-collapse