Как выровнять вложенные таблицы?

Question

[Genri_Rus]

Пример данной таблицы: ссылка

Почему в данном случае вложенная таблица неправильно выравнена и как ее можно привести к нормальному виду ?

Comments

[Сергей delphinpro]

Факт в том, что таблица выровнена правильно, но не так так, как вы ожидаете.
Это кардинально разные вещи.

[Genri_Rus]

Сергей delphinpro, т.е. я данный вариант никак не смогу изменить ?

[Сергей delphinpro]

Genri_Rus, если бы я знал, что вы хотите изменить...
Но в любом случае изменить можно всё. Нужно лишь правильно сформулировать требования к к требуемому результату.

[Genri_Rus]

Сергей delphinpro, мне нужно чтобы эти элементы были выравнены:

spoiler

[Alex XYZ]

Genri_Rus, https://www.w3schools.com/css/css_table_align.asp

[Genri_Rus]

Захаров Александр, видите какая ширина у вложенной таблицы:

spoiler

Если бы так вложенные таблицы себя не вели, то было бы все ровно

Получается только по центру можно выровнять и никак больше не исправить ?

[Alex XYZ]

Genri_Rus, Дайте ссылку на ваш проект в codepen? как будет время гляну.

[Genri_Rus]

Захаров Александр, спасибо вот

[Alex XYZ]

Genri_Rus, Откройте в отдельной вкладке, если плохо видно.

[Genri_Rus]

Захаров Александр, а если мне нужна вложенная таблица ?

[Alex XYZ]

Genri_Rus, Без программирования на одной компоновке у вас не получится сделать связанными размеры столбцов внешней и вложенной таблиц. Вы можете объяснить задачу, в которой это так важно? Клиенту, наверное, всё равно как эти таблицы связаны.

[Genri_Rus]

Захаров Александр, мне нужно сделать выпадающий список: ссылка

Т.е. у меня есть много категорий и у них есть вложенные (дочерние) и с помощью кнопки нужно открывать вложенные

[Alex XYZ]

Genri_Rus, Так там же статическое решение, а не вложенные категории, а просто открытие уже заданных строк таблицы по щелчку мыши. Но зато там отсутствуют таблицы, как я и предполагал.
Я бы посоветовал генерировать таблицу программно из отдельного списка родитель-потомок. Можете в формате JSON показать как выглядит ваша "база данных" булочек?

[Genri_Rus]

Захаров Александр, я так и сделал )

Вот пример

Но у меня есть баг, если открывать все, то при клике на первый плюсик у меня не все закрывается

[Alex XYZ]

Genri_Rus, Потому что вы закрываете только непосредственных потомков. А потомок потомка не закрываете. Вам нужно проверять каким-то образом, что потомок содержит вложенных потомков и закрывать их, но и их тоже надо проверять.

[Genri_Rus]

Захаров Александр, а каким образом ?

[Alex XYZ]

Genri_Rus, Я бы сделал структуру данных в формате JSON в которую записывал состояние видимости пунктов. Связал уровни с линейным списком, который и выводил бы в таблицу. А рассуждать удобнее, когда есть какой-то набор данных.

db = {
items:[
  {
    level_name: "булочки",
    sublevel_visible: true/false, // Видимость подуровней. Если подуровней больше нуля, то выводить уровень с кнопкой
	description: "Какое-то описание",
	id: 0, // не знаю, насколько он должен быть уникальным
    items: [
	  {
		level_name: "хлеб",
		sublevel_visible: true/false,
		description: "Какое-то описание",
		id: 0,
		items: [],
	  },
	  {
		level_name: "Булочки",
		sublevel_visible: true/false,
		description: "Какое-то описание",
		id: 1,
		items: [],
	  },

    ],
  },

  {
    level_name: "Торты",
    sublevel_visible: true/false, // Видимость подуровней
	description: "Какое-то описание",
	id: 0, // не знаю, насколько он должен быть уникальным
    items: [
	  {
		level_name: "Кремовые",
		sublevel_visible: true/false,
		description: "Какое-то описание",
		id: 0,
		items: [
		  {
			level_name: "Наполеон",
			sublevel_visible: true/false,
			description: "Вкусные завитушки",
			id: 0,
			items: [],
		  },
		  {
			level_name: "Мишка на севере",
			sublevel_visible: true/false,
			description: "Прозрачные льдины",
			id: 0,
			items: [],
		  },
		],
	  },
	  {
		level_name: "Безье",
		sublevel_visible: true/false,
		description: "Какое-то описание",
		id: 1,
		items: [
		  {
			level_name: "Полуночный большой",
			sublevel_visible: true/false,
			description: "12 долек",
			id: 1,
			items: [],
		  },
		  {
			level_name: "Полуночный маленький",
			sublevel_visible: true/false,
			description: "6 долек",
			id: 1,
			items: [],
		  },
		],
	  },
	  {
		level_name: "Пиццы",
		sublevel_visible: true/false,
		description: "Какое-то описание",
		id: 1,
		items: [
		  {
			level_name: "Мысные",
			sublevel_visible: true/false,
			description: "описание",
			id: 1,
			items: [
			  {
				level_name: "С венскими колбасками",
				sublevel_visible: true/false,
				description: "описание",
				id: 1,
				items: [],
			  },
			  {
				level_name: "С курицей",
				sublevel_visible: true/false,
				description: "описание",
				id: 1,
				items: [],
			  },
			],
		  },
		  {
			level_name: "Фруктовые",
			sublevel_visible: true/false,
			description: "",
			id: 1,
			items: [],
		  },
		],
	  },

    ],
  },
],
}

Потом сделал бы обход с рекурсией, и выводил бы в таблицу только пункты с visible==true. Тогда и таблица получается линейной.

[Genri_Rus]

Захаров Александр, а почему в вёрстке сложно такое сделать ?

[Alex XYZ]

Genri_Rus, Вёрстка таблиц - линейная. Ваш список - иерархический. Превращение одного в другое не может быть выполнено за один шаг. Точнее, конечно, может, но написать такой код можно только один раз, как правило. Поддерживать его будет очень дорого по времени и по усилиям.
Если поищите готовые решения отображения иерархических данных в виде таблиц с контролами типа ваших, то таких решений очень мало. Как раз по той причине, что делать их сложно. Напрмер slickgrid. Или вот плагин jquery. Везде это делается с большим количеством кода и настроек. Вы решаете достаточно сложную задачу.

[Genri_Rus]

Захаров Александр, задача в том, что мне нужно это без плагина реализовать

[Alex XYZ]

Genri_Rus, Я вам показал, что примеров реализации не много в связи со сложностью задачи. Если вы просто учитесь программировать, то на мой взгляд у вас проблема с декомпозицией задачи. Такую задачу надо разбить на несколько частей и решать их по отдельности. Вы пытаетесь решить её монолитно. Типа вот HTML, вот код JavaScript - вопрос - «почему не работает?» тут выглядит несколько наивно.
Я считаю так не правильно решать задачу.