Jump to content
  • Sign Up
  • 0

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


Formikulo

Question

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

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

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

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

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

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

Link to post
Share on other sites

15 answers to this question

Recommended Posts

  • 0

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

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

Link to post
Share on other sites
  • 0

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

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

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

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

Edited by Formikulo
Link to post
Share on other sites
  • 0

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

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

Link to post
Share on other sites
  • 0

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

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

Link to post
Share on other sites
  • 0

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

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

Link to post
Share on other sites
  • 0

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

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

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

Link to post
Share on other sites
  • 0
10 часов назад, Formikulo сказал:

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

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

 

Link to post
Share on other sites
  • 0
Posted (edited)
19 часов назад, Igor Schnaider сказал:

margins, не paddings:

https://jsfiddle.net/4L2u1bqf/

Спасибо!

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

Edited by Formikulo
Link to post
Share on other sites
  • 0

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

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

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

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

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

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

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

Link to post
Share on other sites
  • 0

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

Link to post
Share on other sites
  • 0

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

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

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

Link to post
Share on other sites
  • 0
10 часов назад, Formikulo сказал:

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

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy