Верстка таблицы: border у ячейки?

Есть таблица. border:none, border-collapse:collapse

У всех tr стоит border-bottom:1px

1. Появилась необходимость добавлять/убирать границу к конкретным ячейкам, отличную от границы строки. Но при добавлении наблюдается довольно странное поведение.

Уточнение. С solid всё нормально отображается, но мне нужен dotted.

Если ставить 1px – отображается только левая и правая границы, верх-низ типа «съедает» граница tr. Пробовал переносить border-bottom на td – всё равно. Если поставить !important – появляется нижняя граница. Верхняя никак.

По факту, я так понимаю, проблема в том, что происходит collapse различных границ. Но как это решить – не знаю.

Но при этом, что интересно, граница нормально отображается в случае ширины в 2px.

2. Ещё недостаток, что та же граница получается как бы снаружи ячейки, что вообще логично. Но хочется иначе. Можно ли, не добавляя никаких элементов внутрь td, сделать так, чтобы граница была «внутри» ячейки и не влияла на расположение текста (то есть, чтобы при изменении border текст визуально не смещался)? Желательно без особых костылей, я тогда уже лучше добавлю внутрь какой-то div.
  • Вопрос задан
  • 8863 просмотра
Решения вопроса 1
@Kukunin
Ваша проблема в том, что граница tr перекрывает границу в td. В случае, если граница td 2px, один пиксель проявляется.
Кстати, было бы неплохо посмотреть пример на том же jsfiddle.

Как возможный ответ: смотрите в сторону outline — тот же border, только не влияет на размеры блока.
Если outline не подходит, нужно уменьшать padding ячейки на размер border, чтобы нивелировать разницу.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
dpigo
@dpigo
Front-end developer
На Stackoverflow пишут, что при border-collapse solid имеет приоритет над dotted. Рекомендуют избегать таких ситуаций.

Там же ссылка на пример конфликтов border-collapse: lachy.id.au/dev/css/tests/bordercollapse/bordercollapse.html
Ответ написан
denisfl
@denisfl
я тогда уже лучше добавлю внутрь какой-то div.

Мне кажется, это самый простой и «безкостыльный» способ. Только я бы добавил div внутри каждой ячейки и добавлял border именно к этому div-у
Ответ написан
MariaLovesHabr
@MariaLovesHabr
я не волшебник, я только учусь
боже я тоже сейчас интересовалась вопросом как при коллапсе делать границы у ячеек, чтобы их не перекрывали границы строк, которые мне лично убирать ну никак нельзя. возиться с позиционированием и дивами тоже не хотелось. думала думала, дак так ничего и не придумала кроме как добавить к ячейкам вот такие фоны background: url(/design/1x1.png) top left repeat-x; где 1x1.png это картинка на черный квадрат размер 1 на 1 пиксель, при повторении этот фон имитирует границу. а цвет ячейки задается отдельным селектором с помощью background-color. костыль интересный на мой взгляд, поэтому делюсь в теме по первой ссылку в гугле.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы