Проблема с отображением одной из границ таблицы

[Irgo]

Добрый день, уважаемые форумчане,

 

Прошу помощи/совета со следующим вопросом. Пытаюсь изменить внешний вид модуля для джумлы (прогноз погоды) и застопорилась на проблеме с обводкой таблицы - по какой-то причине, в Safari и Chrome не отображается правая граница (при этом в Firefox на данный момент все отобразилось).

 

Ссылка вот: http://greece-guide.ru/attica/athens/10-pogoda-v-afinakh

 

Вот скриншот, как это отображается в Safari - 

 

Границы нарочно сделаны толстыми, для наглядности.

 

Вот кусок CSS:

 

 

/* TABLE-UI */

/* —————————————-- */

.nordui-table {margin:15px 0 15px 0;padding:0px;background: #ffffff; border: solid thick #3EC3D9 !important;}

.nordui-table-header {font-family: Clear_sans_lightregular;height:28px;border: solid #3EC3D9 !important; background: linear-gradient(to bottom, #42CEE6, #37ACBF) !important; padding:5px;text-align:center;font-weight:bold;font-size:12px; color: #fff;} 

.nordui-table-header-b {font-family:Clear_sans_lightregular;height:28px;border-style:solid;border-width: 0px 0px 0px 0px;border-color:#3EC3D9;background-color:#fff;padding:5px;text-align:center;font-weight:bold;font-size:11px;color: #277bab;} 

.nordui-table-subheader {height:28px;background-color:#fff; border-style:solid;border-width: 1px; border-color:#3EC3D9;color:#4a4a4a;font-size:11px;}

.nordui-table-a {background: #fafafa;}

.nordui-table-b {background: #ffffff;}

.nordui-table-a:hover, .nordui-table-b:hover {background: rgba(62, 195, 217, 0.4);}

.nordui-table-td {padding:5px;font-size:11px;}

.nordui-table-td-left {padding:5px;border-left:solid 1px;border-color:#88BCCE;font-size:11px;}

.nordui-table-td-right {padding:5px;border-right:solid 1px;border-color:#89BCCE;font-size:11px;}

.nordui-table-td-top {padding:5px;border-top:solid 1px;border-color:#88BCCE;font-size:11px;}

.nordui-table-td span {text-align:left;float:left; } 

.yr-right {text-align:right;float:right;}

.yr-button {float:left;margin-right:20px;}

...

 

 

Буду признательна за помощь в поиске ошибки!

[Int]

Быстрое решение: сунь таблицу в родителя, ему задай нужный фон и сделай padding, чтобы фон по краям было видно. Ну или через border, это уж как угодно будет.

В хроме граница появилась когда сделал border-collapse: separate

[Irgo]

Спасибо!

Как выяснилось, это уже известный баг webkit таблиц - http://stackoverflow.com/questions/3384132/webkit-browsers-rendering-problem-for-table-depending-on-colspan

Border-collapse: separate решал проблему, но не давал стилизовать таблицу как хотелось.. С родителем не прокатило - отображался такой же рваный край (возможно, что-то не то делала)))

В итоге в моем случае вопрос решился назначением границы у первой и последней ячейки ряда.