...
<td>{{translate('date')}}</td> - в ячейку необходимо подставить параметр Дата. Для выбора другого параметра вместо 'date' списать необходимо вписать необходимое наименование. Если параметр существует в системе, выйдет подсказка.
<td>{{format(startTime, 'DD/MM/YYYY')}}</td> - указываем формат, в котором необходимо выводить дату. Если необходимо вставить параметр, отличный от даты, строчку нужно удалить.
<td class="divider"></td> - разделитель, в таблице представлен как пустая ячейка.
<td>{{translate('onTimeReportLoading')}}</td>
<td>{{format(loadingStartTime, 'HH:mm')}} - {{format(loadingEndTime, 'HH:mm')}}</td>
...
в части, заключенной в теги </td> - </td>, описываются параметры, значения которых должны выводиться в ячейке.
...
Раздел начинается с тега <style>
Нас интересуют интересует описание сущетсвующих существующих таблиц. Проще делать по примеру имеющихся.
Происываем Прописываем класс таблицы table.main-info
...
table.main-info td {
border: 1px solid #222B35; - Рамка вокруг таблицы
padding: 2px 5px; - Поля вокруг текста
white-space: nowrap; - устанавливает, как отображать пробелы между словами. Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега <br> переносит текст на новую строку.
text-align: left; - выравнивание текста
}
...
table.main-info td:nth-child(1), - Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.
table.main-info td:nth-child(4) {
width: 8%;
font-weight: bold; - станавливает устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100.
}
...
- Найти описание таблицы, в которую необходимо добавить столбец
- В части описания заголовка добавить строку с описанием заголовка столбца. !Столбец будет добавлен в соответствии с местом его расположения в списке!
- В части описания параметра добавить строку с описанием параметра !Должно соответсвовать соответствовать порядку расположения наименовнаия наименования столбца!
Пример:
В таблицу перечня заказов добавим столбец Номер телефона. Столбец добавим между столбцами Клиент и Адрес
...
Добавление новой таблицы
- Для добавления новой таблице таблицы необходимо создать класс таблицы.
- Описать заголовки таблицы, т.е. обозначить параметры, которые будут содержаться в столбце
- Описать значения параметров для столбцов.
ПрПример: создадим таблицу описания ТС
...
Столбцы, которые не должны заполняться системой, прописываются с пустым значением
<td></td>
<td></td>
</tr>
<tfoot></tfoot>
</table>
...
Задание стиля таблицы
В таблице со списком ордеров заказов строки через одну имеют серый цвет. Сейчас на примере рассмотрим, как поменять цвет . И как и убрать выделение.
Меняем цвет (заливку) строк.
Находим описание таблицы с классом orders-info. Находим строчки с описанием псевдокласса. меняем Меняем значение background. В таблице HTML цветов https://colorscheme.ru/html-colors.html выбираем цвет значение HEX - к примеру, #C71585
...
Смотрим:
Меняем заливку шапки
находим Находим описание шапки таблицы, должен быть тег th
table.orders-info th {
background: #F0E68C; -указываем цвет заливки
color: #4B0082; - цвет шрифта в заголовке
Границы/рамки таблицы
Мы сделали нашу таблицу, теперь После создания таблицы нужно обозначить ее границы, т.е. то есть добавить сетку.
Описываем класс таблицы
...
table.vehicle th,
table.vehicle td {
padding: 2px 5px; Поля вокруг текста
} ниже описаны грациы границы таблицы
table.vehicle tr {
border-top: 1px solid #222B35;
}
table.vehicle td {
border-right: 1px solid #222B35;
}
...