Вложенные таблицы. Проблема с отображением рамок вложенных таблиц

[Formikulo 0]

Здравствуйте!

Прошу помочь мне советом по оформлению вложенных таблиц.

Пример по ссылке:

https://jsfiddle.net/formikulo/895fnhzc/1/

Проблема заключается в том, что рамки между вложенными таблицами в Таблице 2 выглядят жирнее, чем остальные. Хотя для всех линий задана одна толщина 1px.

Как сделать так, чтобы все рамки были одинаковой толщины?

[npofopr 426]

Никак. Не вставляйте таблицы в таблицы.

А кто вас вообще научил так делать? 

[Formikulo 0]

Никто не учил, сам учусь.

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

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

https://jsfiddle.net/formikulo/895fnhzc/9/

Edited February 27 by Formikulo

[Igor Schnaider 175]

Вы table прямо в tr вставляете, а не в td (строка 25 и дальше тоже).

 

[Formikulo 0]

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

https://jsfiddle.net/formikulo/5qv7bf06/9/

[Igor Schnaider 175]

Дефолтные отступы у ячеек.

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

[Formikulo 0]

А если более развернуто?

[npofopr 426]

вы же для внутренней таблицы можете задать border: 0 
и не будет границ. 

А вообще, имелось ввиду задать margin: -1px, чтобы во внешние стороны сдвинулось. 

[Formikulo 0]

Если задать border: 0 для внутренней таблицы, то тогда и внутренней таблицы не будет.

padding: -1px; для внутренней таблицы не работает

https://jsfiddle.net/formikulo/895fnhzc/36/

[Igor Schnaider 175]

margins, не paddings:

https://jsfiddle.net/4L2u1bqf/

[npofopr 426]

10 часов назад, Formikulo сказал:

Если задать border: 0 для внутренней таблицы, то тогда и внутренней таблицы не будет.

border можно убрать для таблицы, но для внутренних td оставить. 
хотя там скорее всего всё равно зазор будет. 

 

[Formikulo 0]

19 часов назад, Igor Schnaider сказал:

margins, не paddings:

https://jsfiddle.net/4L2u1bqf/

Спасибо!

https://jsfiddle.net/formikulo/5qv7bf06/43/

Edited March 2 by Formikulo

[Stoer 0]

Удивительное дело! Недавно заказал почти такой же функционал на одной фриланс бирже. Тоже пять ячеек в ширину, но может быть и четыре, и три (зависит от размера окна). И ячейки тоже должны быть равны по ширине, прямо как у автора поста! Да что говорить, вот какую задачу я поставил: https://prnt.sc/10bwq71

Удивительно, но у исполнителя возникли те же проблемы что у автора поста:

25.02.2021 в 17:03, Formikulo сказал:

рамки между вложенными таблицами в Таблице 2 выглядят жирнее, чем остальные. Хотя для всех линий задана одна толщина 1px.

Правда исполнитель был опытный: 6 лет на сайте, под сотню положительных отзывов, ни одного отрицательного, ни одного арбитража. Он бился над задачей две недели и выдал ошеломительный результат: https://prnt.sc/10bwqb2 Который конечно меня не устроил. 

Я пришел на этот форум чтобы немного разобраться как верстаются такие табличные сайтики и кажется сразу попал в яблочко!

Если кому-то интересна более подробная история с исполнителем, напишите, расскажу. 

[Stoer 0]

А пока мне бы хотелось узнать, хоть в общих чертах, как верстать подобные страницы:  https://prnt.sc/10bwq71 Страница и резиновая и адаптивная. Количество колонок зависит от ширины окна браузера. Мне нужно хоть чуть-чуть понять принцип, чтобы меня не разводили недобросовестные исполнители. Что верстать таблицей не надо я уже понял 😃 

[Formikulo 0]

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

Я почему поставил такую задачую Я оформил свою домашнюю библиотеку в виде офлайн-сайта с ссылками на файлы книг.

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

[Stoer 0]

10 часов назад, Formikulo сказал:

А то сейчас опытные товарищи второй раз вряд ли сюда заглянут.

Ничего страшного. Я ведь свои примеры и для вас тоже выложил. Не вы один верстаете таблицу в таблице в 2021 году. Опытные разработчики тоже так верстают, причем синхронно с вами. Мой проект длился с 15 февраля по 1 марта. И вы свои учебные вопросы задавали в этом промежутке. Еще в моем проекте тоже есть книги, журналы, сортировка по годам. Все как у вас. Просто удивительное совпадение!