Как дать вложенной ячейке таблицы HTML прозрачный фон? - PullRequest
Новая
       50

Как дать вложенной ячейке таблицы HTML прозрачный фон?

1 голос
/ 11 июня 2011

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

background-color: transparent;

но это, похоже, ничего не меняет.

Может быть, легче понять проблему с визуалом. Я распустил текст и обвел таблицы, чтобы выделить их. По сути, мне нужно, чтобы эти белые области в строках с серым фоном также имели серый фон (для всей их таблицы), чтобы вы не могли сказать, что это отдельная таблица.

enter image description here

Кроме того, это должно работать в IE. Я знаю, я знаю, но ... так оно и есть.

Спасибо!

Ответы [ 4 ]

4 голосов
/ 11 июня 2011

Использование * css selector: 

table tr.row1 td * {
    background-color: COLOR1;
}
table tr.row2 td * {
    background-color: COLOR2;
}
2 голосов
/ 11 июня 2011

Этот файл создается программно.В то время как я отвечаю за код, который заканчивает форматированием документа, другие написали части кода, которые фактически строят сырой HTML-файл.Я только что заметил после отладки этой проблемы в течение последних 45 минут или около того, что теги <tr> на самом деле имеют жестко закодированный style=background-color:White, о котором я не знал и пропустил, когда просматривал код вспомогательной таблицы.Я удалил, перепроверил, и в этом была проблема.

Извините, я поднял этот вопрос здесь сейчас, когда заметил, что это была такая глупая «ошибка», оказывается, что background-color:transparent; работает в конце концов нормально.Спасибо за вашу помощь!

0 голосов
/ 01 декабря 2014

Убедитесь, что вы более специфичны с вашим селектором CSS для подтаблицы, чем для его родителя.

Похоже, вы применяете стиль background-color к нечетным номерам<tr> в общем, поэтому примените background-color: transparent; к <tr> определенному классу в подтаблице. 

table tr:nth-child(even) {
  background-color: gray;
}

table.subTable tr {
  background-color: transparent;
}

td {
  border: 1px solid black;
}
<table>

  <tr>
    <td>
      super content
    </td>

    <td>
      <table class="subTable">
        <tr>
          <td>sub content</td>
          <td>more sub content</td>
        </tr>
        <tr>
          <td>sub content</td>
          <td>more sub content</td>
        </tr>
      </table>
     </td>
  </tr>

  <tr>
    <td>
      super content
    </td>

    <td>
      <table class="subTable">
        <tr>
          <td>sub content</td>
          <td>more sub content</td>
        </tr>
        <tr>
          <td>sub content</td>
          <td>more sub content</td>
        </tr>
      </table>
     </td>
  </tr>

  <tr>
    <td>
      super content
    </td>

    <td>
      <table class="subTable">
        <tr>
          <td>sub content</td>
          <td>more sub content</td>
        </tr>
        <tr>
          <td>sub content</td>
          <td>more sub content</td>
        </tr>
      </table>
     </td>
  </tr>

  <tr>
    <td>
      super content
    </td>

    <td>
      <table class="subTable">
        <tr>
          <td>sub content</td>
          <td>more sub content</td>
        </tr>
        <tr>
          <td>sub content</td>
          <td>more sub content</td>
        </tr>
      </table>
     </td>
  </tr>

</table>
0 голосов
/ 16 апреля 2014

Попробуйте это (требуется CSS3) 

opacity: ##;

Где ## - десятичное значение от 0 до 1.

0 - прозрачный 100%, 1 - непрозрачный 100%.Значения между ними являются десятичными (хотите 30% прозрачности? Используйте 0,7)

...