2016-06-08 5 views
1

Я создаю панели инструментов Splunk. Для моих таблиц у меня есть таблица стилей, называемая application.css, которая чередует цвет строк таблицы в соответствии с требованиями. К сожалению, при использовании диаграмм highcharts-tooltip - это в основном таблица, и она отображается с чередующимися цветами для строк. В результате строка значений - очень светло-зеленый фон с белым текстом. Текст не может быть прочитан.Переопределить цвет фона ячейки ячейки в highcharts-tooltip

Похоже, что highcharts-tooltip генерируется скриптом java.

Это как подсказка оказывается на странице:

<table class="highcharts-tooltip"> 
<tbody> 
    <tr> 
    <td style="text-align: left; color: rgb(204, 204, 204); max-width: 120.34px;"> WebPage:&nbsp;&nbsp;</td> 
    <td style="text-align: right; color: rgb(255, 255, 255); max-width: 504.65px;">\\x94/bla/bla/Browse.html\\x94</td> 
    </tr> 
    <tr> 
    <td style="text-align: left; color: rgb(30, 147, 198); max-width: 120.34px;">Hits:&nbsp;&nbsp;</td> 
    <td style="text-align: right; color: rgb(255, 255, 255); max-width: 504.65px;">12</td> 
    </tr> 
    <tr> 
    <td style="text-align: left; color: rgb(30, 147, 198); max-width: 120.34px;">Hits%:&nbsp;&nbsp;</td> 
    <td style="text-align: right; color: rgb(255, 255, 255); max-width: 504.65px;">24.49%</td> 
    </tr> 
</tbody> 
</table> 

Второй тр это тот, который не может быть прочитан. Мой вопрос в том, есть ли способ переопределить переменные цвета строк во всплывающей подсказке, используя css в моем файле application.css, чтобы строка не была rgb (255,255,255), а rgb (00,00,00)?

+0

Вы не описывают, как вы создаете свой Highcharts код, но здесь есть API документ о том, как форматировать подсказка: HTTP: //api.highcharts. com/highcharts # tooltip – wergeld

+0

Highcharts создаются в пакете Splunk. У меня нет контроля над их поколением. лучшее, что я могу сделать, это попытаться переопределить стиль css. – kjmatt

+0

Второй 'tr' или каждый второй' td'? –

ответ

2

Использование !important может быть единственным способом переопределения встроенного стиля. Помните, что это решение изменит цвет td даже в подсказках других диаграмм. Чтобы избежать этого, предоставьте селектор #[CHART CONTAINER ID].

Css:

table.highcharts-tooltip tbody tr td:nth-child(2){ 
    color: #000000 !important; 
} 

nth-child browser compatibility

+0

Мне пришлось немного изменить его, но это сработало! благодаря – kjmatt

 Смежные вопросы

  • Нет связанных вопросов^_^