Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   как нарисовать все границы в DataTables? (https://javascript.ru/forum/jquery/79541-kak-narisovat-vse-granicy-v-datatables.html)

izumov 20.02.2020 19:08

почти все получилось за исключением футера помогите побороть сей косяк

voraa 20.02.2020 19:32

Вообще структура странная.
Я не пойму, зачем три таблицы?
Почему нельзя все было запихнуть в одну в thead, tbody, tfoot?
Ну да ладно, вам виднее. Может так и надо.

У ячеек, которые в теле, верхняя граница убрана. а нижняя есть
А у ячеек, которые в tfoot есть верхняя граница. Вот нижние из tbody и верхние из tfoot и накладываются.

Трудно быстро проанализировать
там много раз встречается border-top: none;
(строки 90 95 102 104)
Куда то туда надо еще добавить селектор для tfoot типа
table.dataTable.row-border tfoot tr:first-child th

izumov 20.02.2020 21:11

прошу об всем этом поподробнее надо причесать страницу довести до кондиции

voraa 20.02.2020 22:09

Честное слово, очень трудно разбираться.
У вас есть два файла good.css и datatables_for_cks.css
И там многое дублируется и переопределяется.
Например в одном

table.dataTable {
...
  border-collapse: separate;
...
}

В другом все тоже самое, но
border-collapse: collapse;

Возьмется, конечно, тот, который последний, но следить за этим трудно.
Тоже самое про определения и переопределения классов для ячеек

Я не понимаю, зачем 3 таблицы, одна с thead, одна с tbody, и еще одна с tfoot?
Почему нельзя сделать одну с thead, tbody и tfoot?
Во-первых 3 труднее стилизовать.
border-collapse: collapse;
действует только внутри одной своей таблицы. Он не будет убирать границы между таблицами.
И если уж вы думаете о доступности (атрибуты role, aria...)? то th ,будет заголовком только для своей таблице - на другую он распространяться не будет.

Мне кажется, что там надо навести порядок в css.
Ну а так надо просмотреть все определения
table.dataTable tfoot th {
}
и убрать везде верхнюю границу

Еще. в datatables_for_cks.css (191 стр)

table.dataTable.compact thead th,
table.dataTable.compact thead td,tfoot{
  padding: 0px 0px 0px 0px;font-size:10px; text-align:center;
}

Вроде определяется размер шрифта и для thead и для tfoot
Но в good.css (44 стр) переопределяется
table.dataTable thead th,
  table.dataTable tfoot th {
border: 1px solid #111111;
    font-weight: bold;
	border-spacing: 0;
    font-size:14px;	}

izumov 21.02.2020 14:30

бьюсь и никак не пойму почему заголовок в thead не и устанавливается посредине

voraa 21.02.2020 22:57

Потому, что

table.dataTable.compact thead th, 
table.dataTable.compact thead td {
    padding: 0px 17px 4px 0px;
}


good.css (167)

izumov 22.02.2020 12:25

благодарю за ценные подсказки помогите побороть увеличенный шрифт в
footer и сдвоенность границы между footer и body таблицы

izumov 22.02.2020 12:55

скорректировав строку 60 в goods.css сдвоенность границы удалось устранить а вот со шрифтами беда не могу найти место где ими можно управлять ни в заголовке ни в теле таблицы. Подскажите где искать

izumov 22.02.2020 12:57

или подскажите как переопределить правило чтобы управлялись шрифты.
Не пойму какой нужен селектор

voraa 22.02.2020 15:47

Ну отладчиком надо же пользоваться.
В отладчике можно посмотреть любой элемент. Какие классы к нему применяются, из каких файлов берутся и в каких строках описаны

good.css : 44

table.dataTable thead th,
table.dataTable tfoot th {
    border: 1px solid #111111;
    font-weight: bold;
    border-spacing: 0;
    font-size: 14px;
}


Часовой пояс GMT +3, время: 10:46.