HTML-таблицы. Как сделать столбцы дочерней таблицы такой же, как и столбцы родительской таблицы?

Итак, у меня есть таблица внутри таблицы (внутри td).HTML-таблицы. Как сделать столбцы дочерней таблицы такой же, как и столбцы родительской таблицы?

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

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

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

enter image description here

Как следует укладывать на стол ребенка?

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

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

источник

2011-12-21 Tool

использование собственно и Объединение столбцов должно работать, при условии, что у вас нет ничего, чтобы изменить в CSS, как вы гавань помечено этот вопрос, как CSS – defau1t

я сделал Colspan = 15 на тд. (у родителя 15 столбцов), если это то, что вы имели в виду. Но все же выглядит так. – Tool

в порядке, вам нужно убедиться, что ширина установлена правильно. то вы можете использовать свойство css text-ellipsis – defau1t

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

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

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

источник

2011-12-21 18:23:41 Tool

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

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

источник

2011-12-21 17:54:20

У меня есть свои причины - в этом случае это потому, что мне нужно окружить строку формой. И если вы окружаете строку с формой - это недопустимый HTML, поэтому мне нужна целая таблица внутри td. И это лишь одна из причин - это часть плагинов datatables, которые работают таким образом - они добавляют новую таблицу под строку после щелчка. – Tool

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

Можете ли вы отредактировать свой пост и уточнить дальше? Я не уверен, как делать то, что вы описали. – Tool

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

самым быстрым способом было бы добавить классы в каждый столбец (и убедиться, что они соединяются между родителем/дочерним элементом). Обычно я использую префикс «col». Задайте ширину классов, и вы должны быть намного ближе.

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

источник

2011-12-21 18:03:06 PseudoNinja

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

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

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

источник

2011-12-21 18:21:38 slolife

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

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

источник

2016-06-21 18:31:06 snyderxc

HTML-таблицы. Как сделать столбцы дочерней таблицы такой же, как и столбцы родительской таблицы?

ответ

Смежные вопросы