CSS-трюк для отображения границы таблицы и ячеек, когда ячейки не пусты и в противном случае не отображается граница

Question

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

Answer 1

См. Свойство пустые ячейки CSS.

Answer 2

Единственный способ сделать это с чистым CSS - это очень современный браузер. Вам нужно будет использовать расширенные селекторы CSS для этого. Например, вы можете использовать tr: empty, чтобы найти ячейки без дочерних элементов, для простого текста вам нужно будет сделать еще немного.

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

Чтобы узнать больше о CSS3 селекторах Нажмите здесь

Answer 3

Рендеринг границ ячеек частично зависит от того, коллапсируете ли вы границы или нет. Если они не свернуты, границы не отображаются по умолчанию, если нет содержимого ячейки. Это можно переключить с помощью свойства CSS empty-cell .

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

Answer 4

Похоже, что свойство пустых ячеек, предложенное Страгером, может сработать. Если это не делает то, что вам нужно, я бы посмотрел на использование какой-нибудь умной библиотеки javascript, такой как jQuery . Вероятно, вы можете установить ловушку для обновления стиля границы ячейки, чтобы она была getBorderStyle (this), когда содержимое этой ячейки изменяется.

Посмотрите на хук jquery "change" здесь: http://docs.jquery.com/Events/change Если вы выберете все свои ячейки (что вы можете сделать с помощью селектора css) и добавите ловушку изменения, чтобы запустить какую-то функцию, которую вы пишете, называемую updateBorder (), или некоторые другие, у вас все получится. Я предполагаю, что это было бы что-то вроде этого:

$("table.someClass td").change(function() { updateBorder(this) })

Answer 5

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

Answer 6

Дайте пустым ячейкам одно имя класса, а непустым - другое. Один класс определяет границу, другой без.