CSS-трюк для отображения границы таблицы и ячеек, когда ячейки не пустые, и отсутствия границы в противном случае
Ответы 6
Дайте пустым ячейкам одно имя класса, а непустым - другое. Один класс определяет границу, другой - без нее.
Насколько мне известно, это не входит в возможности CSS, лучший вариант, который я могу придумать, - это динамическое применение классов либо через серверный код при заполнении данных, либо через JavaScript после загрузки страницы в браузер.
См. Свойство CSS пустые ячейки.
Вы, должно быть, делаете что-то не так. См. Тестовый пример: liranuna.com/strager/empty-cells.html Убедитесь, что вы применяете свойство empty-cells к вашим td и th, а не к самой таблице.
Но он говорит о самом столе. Удалите весь контент из вашего тестового примера, и вы увидите маленький красный прямоугольник. Я понимаю, что спрашивающий ничего не хотел видеть: «Если все ячейки таблицы пусты, то границы не должно быть видно».
Ах, я неправильно понял проблему. Не совсем уверен, как возникнет эта ситуация; таблицы должны, по крайней мере, иметь заголовки и тому подобное, почти во всех случаях и DATA.
Похоже, что свойство пустых ячеек, предложенное Strager, может помочь. Если он не делает то, что вам нужно, я бы посмотрел на использование какой-нибудь умной библиотеки javascript, например jQuery. Вероятно, вы можете установить ловушку для обновления стиля границы ячейки на getBorderStyle (this), когда содержимое этой ячейки изменяется.
Посмотрите на ловушку jquery "change" здесь: http://docs.jquery.com/Events/change Если вы выберете все свои ячейки (что вы можете сделать с помощью селектора css) и добавите ловушку изменения для запуска какой-то написанной вами функции updateBorder () или какой-то другой, у вас все должно быть хорошо. Я предполагаю, что это будет примерно так:
$("table.someClass td").change(function() { updateBorder(this) })
Отрисовка границ ячеек частично зависит от того, сворачиваете ли вы границы или нет. Если они не свернуты, граница по умолчанию не отображается, если нет содержимого ячейки. Это можно переключить с помощью свойства CSS пустые ячейки.
Если вы сворачиваете границы, вы теряете возможность управлять отображением границ в зависимости от наличия содержимого ячейки.
Единственный способ сделать это с помощью чистого CSS полагается на очень современный браузер. Для этого вам нужно будет использовать расширенные селекторы CSS. Например, вы можете использовать tr: empty, чтобы найти ячейки без дочерних элементов в них, для обычного текста вам нужно будет сделать еще кое-что.
К сожалению, они существуют только в CSS3, поэтому, если вы не можете использовать javascript или коснуться разметки, вы сможете выполнить это только в самых последних браузерах.
Чтобы узнать больше о селекторах CSS3 Кликните сюда
Не контролируйте HTML. Просто контролируйте CSS, и класс применяется к таблице.