Таблица с фиксированными колонкам и группами

@kotelok · Регистрация: 08.08.2014

Студворк — интернет-сервис помощи студентам

Пытаюсь сделать таблицу с многоуровневыми заголовками, фиксированной шириной колонок и фиксированной высотой строк.

Подскажите:
1. Правильный ли это в принципе подход, таким образом задавать ширину, т.е. сначала явным образом выставить ширину самой таблицы, а потом в первой строке задать ширины колонок так, чтобы они в сумме были равны ширине таблицы? Вероятно, эту задачу можно решить как-то иначе? Но именно <table>, ячейки строго фиксированные, без переносов, без авторасширения по высоте/ширине, с обрезанием текста.

2. Возможно ли как-то сдвинуть все строки таблицы (кроме заголовков) на 4 пикселя вверх, т.е. чтобы первая строка на 4 пикселя спряталась под ближайший хидер?

https://codepen.io/alexkho/pen/oNqYRLq

HTML

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div class="container">
  <table>
    <tr class="hidden-header">
      <td style="width: 50px;" /> <!-- fake col 1 -->
      <td style="width: 150px;" /> <!-- fake col 2 -->
      <td style="width: 180px;" /> <!-- fake col 3 -->
      <td style="width: 20px;" /> <!-- fake col 4 -->
    </tr>
 
    <tr>
      <th colspan="2">band 1, 2</th>
      <th colspan="2">band 3, 4</th>
    </tr>
 
    <tr>
      <th>col 1</th>
      <th>col 2</th>
      <th>col 3</th>
      <th>col 4</th>
    </tr>
 
    <tr>
      <td>cell [1,1]</td>
      <td>cell [1,2]</td>
      <td>cell [1,3]</td>
      <td>cell [1,4]</td>
    </tr>
 
    <tr>
      <td>cell [2,1]</td>
      <td>cell [2,2]</td>
      <td>cell [2,3]</td>
      <td>cell [2,4]</td>
    </tr>
 
  </table>
</div>

CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.hidden-header {
    opacity: 0;
    height: 0px;
}
 
.hidden-header td {
    border: 0px; 
    padding: 0px;
}
 
table {
    width: 400px;
    table-layout: fixed;
    border-collapse: collapse;
}
 
th {
    border: orange solid 1px;
    background-color: wheat;
    white-space: nowrap;
    overflow: hidden;
}
 
td {
    border: orange solid 1px;
    white-space: nowrap;
    overflow: hidden;
}
 
tr {
    height: 18px;
    line-height: 0px;
}
 
.container {
    position: relative;
    border: black solid 1px;
    overflow: hidden;
}

@mr_dramm · 15.07.2022, 19:42

Сообщение от kotelok

Вероятно, эту задачу можно решить как-то иначе? Но именно <table>, ячейки строго фиксированные, без переносов, без авторасширения по высоте/ширине, с обрезанием текста.

Чем ваш вариант плох?

Сообщение от kotelok

2. Возможно ли как-то сдвинуть все строки таблицы (кроме заголовков) на 4 пикселя вверх, т.е. чтобы первая строка на 4 пикселя спряталась под ближайший хидер?

есть вариант спрятать строки таблицы под ближайший хидер не двигая всю таблицу

HTML5
1
2
3
4
5
6
    <tr class="hood">
      <th>col 1</th>
      <th>col 2</th>
      <th>col 3</th>
      <th>col 4</th>
    </tr>

css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.hood{
  position: relative;
}
.hood:after{
  content: "";
  position: absolute;
  display:block;
  top: 100%;
  width: 100%;
  left: 0;
  height: 8px;
  background: linear-gradient(0deg, rgba(238, 130, 238, 0) 0%, rgba(255, 165, 0, 1) 100%);
  z-index: 100;
}

Добавлено через 4 минуты
также можно с помощью shadow спрятать, но опять же не двигая таблицу

Добавлено через 1 минуту

Сообщение от mr_dramm

Возможно ли как-то сдвинуть все строки таблицы (кроме заголовков) на 4 пикселя вверх

и тогда такой вопрос они всегда должны быть перекрыты хидером на 4 пикселя статично ?

@kotelok · 15.07.2022, 19:52 **[ТС]**

Сообщение от mr_dramm

и тогда такой вопрос они всегда должны быть перекрыты хидером на 4 пикселя статично

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

И не построчно, а именно попиксельно. А в этом случае, при определённых положениях ползунка, строки будут не всегда выравнены строго по шапке, а иногда будут прятатся под неё на значение в диапазоне единицы до "высота строки -1" (4 пикселя просто для примера, как одно из возможных состояний).

При горизонтальной прокрутке я могу просто всю таблицу двигать влево/вправо попиксельно за пределы контейнера. А вот по вертикали так не получается, т.к. заголовки тогда тоже двигаются, т.к. они часть таблицы.

@mr_dramm · 15.07.2022, 19:58

Такой вариант вам не подойдет?

@kotelok · 15.07.2022, 20:45 **[ТС]**

mr_dramm,
Возможно, но осилить пока не получается. Оно себя вообще странно ведёт с этим 'sticky', т.е. двигает не хидер или ячейку хидера, а только содержимое ячейки, рамка при этом на месте остаётся. А если внутрь <th> поместить <div> и сделать ему рамку, то вообще всё очень странно расползается.

Пока сделал костыльное обходное решение:
1. Исходная таблица разделяется на две таблицы. Размещаются друг под другом.
2. В первой остаются - фэйковый хидер с размерами и реальные заголовки/бэнды. Выставляется 'z-index' больше, чем у второй таблицы.
3. Во второй - дублируется фэйковый (скрытый) хидер с размерами и размещаются строки с данными.
4. Вторая таблица через отрицательный 'margin-top' сдвигается под таблицу с заголовками на нужное количество пикселей.

@mr_dramm · 15.07.2022, 21:25

так?

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
 
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
 
    .hidden-header {
        opacity: 0;
        height: 0px;
    }
 
    .hidden-header td {
        border: 0px;
        padding: 0px;
    }
 
    table {
        width: 400px;
        overflow: scroll;
        table-layout: fixed;
        border-collapse: collapse;
    }
 
    th {
        height: 18px;
    }
 
    th {
        background-color: wheat;
        white-space: nowrap;
        overflow: hidden;
    }
 
    td {
        border: orange solid 1px;
        white-space: nowrap;
        overflow: hidden;
    }
 
    .sticky {
        position: sticky;
    }
 
    .header1 {
        top: 0;
    }
 
    .header2 {
        top: 18px;
    }
 
    .header {
        outline: 1px solid orange;
    }
 
    td {
        height: 80vh;
    }
    </style>
</head>
 
<body>
    <table>
        <tr class="hidden-header">
            <th style="width: 50px;" /> <!-- fake col 1 -->
            <th style="width: 150px;" /> <!-- fake col 2 -->
            <th style="width: 180px;" /> <!-- fake col 3 -->
            <th style="width: 20px;" /> <!-- fake col 4 -->
        </tr>
        <tr>
            <th colspan="2" class="sticky header header1">
                band 1, 2
            </th>
            <th colspan="2" class="sticky header header1">
                band 3, 4
            </th>
        </tr>
        <tr>
            <th class="sticky header header2">
                col 1
            </th>
            <th class="sticky header header2">
                col 2
            </th>
            <th class="sticky header header2">
                col 3
            </th>
            <th class="sticky header header2">
                col 4
            </th>
        </tr>
        <tr>
            <td>cell [1,1]</td>
            <td>cell [1,2]</td>
            <td>cell [1,3]</td>
            <td>cell [1,4]</td>
        </tr>
        <tr>
            <td>cell [2,1]</td>
            <td>cell [2,2]</td>
            <td>cell [2,3]</td>
            <td>cell [2,4]</td>
        </tr>
    </table>
    <script></script>
</body>
 
</html>

@kotelok · 15.07.2022, 21:33 **[ТС]**

Сообщение от mr_dramm

так?

Не совсем. У меня нет дефолтного скролла. Есть таблица на несколько строк, которая по высоте помещается в свой контейнер. И у неё блок строк с данными должен быть сдвинут на несколько пикселей выше нижней границы заголовков.

Т.е. внешне да, как и при реализации через стандартную прокрутку, что вы показали, но стандартную я использовать не могу, так что вынужден симулировать схожее поведение через отрисовку кусочка таблицы с определённым смещением строк.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@mr_dramm Молодой техлид) 1818 / 1056 / 329 Регистрация: 17.07.2021 Сообщений: 2,147 Записей в блоге: 14
	15.07.2022, 19:58
	Такой вариант вам не подойдет? 1

@kotelok 1341 / 920 / 265 Регистрация: 08.08.2014 Сообщений: 2,766
	15.07.2022, 20:45 [ТС]
	mr_dramm, Возможно, но осилить пока не получается. Оно себя вообще странно ведёт с этим 'sticky', т.е. двигает не хидер или ячейку хидера, а только содержимое ячейки, рамка при этом на месте остаётся. А если внутрь <th> поместить <div> и сделать ему рамку, то вообще всё очень странно расползается. Пока сделал костыльное обходное решение: 1. Исходная таблица разделяется на две таблицы. Размещаются друг под другом. 2. В первой остаются - фэйковый хидер с размерами и реальные заголовки/бэнды. Выставляется 'z-index' больше, чем у второй таблицы. 3. Во второй - дублируется фэйковый (скрытый) хидер с размерами и размещаются строки с данными. 4. Вторая таблица через отрицательный 'margin-top' сдвигается под таблицу с заголовками на нужное количество пикселей. 0