WedX - журнал о программировании и компьютерных науках

Скрытая видимость удаляет цвет фона в таблице

Я создаю приложение, и у меня динамически создается таблица.

Строки таблицы создаются следующим образом

<tr style="background-color: #71aa9a;">
  <td></td>
  .
  . 
  .
  <td></td>
<tr/>

И некоторые из td скрыты во время создания.

Проблема заключается в том, что когда td невидим (visibility:hidden), цвет фона tr исчезает и вместо этого становится белым.

Может кто-нибудь объяснить мне, почему и как я могу это решить?

Я не хочу использовать display:none; из-за необходимости конкретных тд подряд.

html css
24.08.2018

  • opacity: 0; работает как альтернатива, но у меня нет почему 24.08.2018
  • Вот игра с ситуацией: jsfiddle.net/7cs1zhLd/1 Я получаю проблему в Firefox, но не Хром. На самом деле кажется, что цвет фона, примененный к tr, на самом деле применяется непосредственно к td, но было бы неплохо найти какую-то ссылку на это. 24.08.2018
  • В каждой ячейке таблицы оберните содержимое в div и примените к нему css в качестве обходного пути. 24.08.2018

Ответы:


1

Мне жаль, что у меня нет более точного объяснения этой проблемы, но дело в том, что свойства фона для <tr> элементов весьма привередливы. На вашем месте я бы просто обернул содержимое ячейки в <div> и вместо этого сделал visibility: hidden.

<tr>
  <td><div style="visibility: hidden">You dont see me!</div></td>
  <td>etc.</td>
</tr>
24.08.2018

2

Хорошо, я бы использовал трюк, используя в основном font-size: 0, что сделает контент невидимым, недоступным для выбора. Стили для всех внутренних элементов (>*) здесь перезаписывают значения по умолчанию.

Фрагмент

tr {
  background: red;
}

.hidden,
.hidden>* {
  font-size: 0;
  height: 0;
  width: 0;
  margin: 0;
  border: 0;
  background: transparent;
}
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td class="hidden"><button onclick="">Smith</button></td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

24.08.2018
  • Прозрачность содержимого ячейки не препятствует выбору содержимого и его копированию и вставке, а также не препятствует нажатию ссылок или кнопок. 24.08.2018
  • Кроме того, у меня есть кнопки, которые можно нажимать. Но спасибо за ответ 24.08.2018
  • @lampyridae: это верно, но если у вас есть какое-либо другое решение без JS, я весь в ушах. 24.08.2018
  • Хорошо, я отредактировал свой ответ. Новый трюк должен сработать во всех случаях. 24.08.2018
  • Использование font-size: 0; background-color: black; работает для меня. Он сохраняет мой цвет фона. Использование visibility: hidden удаляет цвет фона. 12.11.2020
    • Новые материалы
    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Для любых предложений по сайту: [email protected]