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

Asked
Viewd3196

1

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

6 ответов

4

См. свойство CSS empty-cells .

  • Ах, я неправильно понял проблему. Не совсем уверен, как возникнет эта ситуация; таблицы должны иметь как минимум заголовки и тому подобное, почти во всех случаях и ДАННЫЕ.

    strager26 ноября 2008, 20:28
  • Вы, должно быть, делаете что-то не так. См. Тестовый пример: http://liranuna.com/strager/empty-cells.html. Убедитесь, что вы применяете свойство empty-cells к вашим td и th, а не к самой таблице.

    strager26 ноября 2008, 19:23
  • Но он говорит о самом столе. Удалите весь контент из вашего тестового примера, и вы увидите маленький красный прямоугольник. Я понимаю, что спрашивающий ничего не хотел видеть: «Если все ячейки таблицы пусты, то границы не должно быть видно».

    buti-oxa26 ноября 2008, 20:19
0

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

  • Вы не можете контролировать HTML. Просто контролируйте CSS, и класс применяется к таблице.

    SharePoint Newbie26 ноября 2008, 19:14
0

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

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

0

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

1

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

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

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

0

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

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

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