Прокручивающийся tbody

@berkut_174 · Регистрация: 17.01.2013

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

Всем привет!

У меня страница растягивается на всю высоту и ширину, нужно чтобы прокрутка была только в tbody.
Код не ниже не работает, подскажите как правильно сделать?
Аналогичный код, если на месте tbody находится div, работает как положено.

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
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
<!DOCTYPE html>
<html>
 
<head>
    <title>tbody overflow</title>
    <meta content="charset=utf-8" />
    <style>
        html, body {
            width: calc(100% - 10px);
            height: calc(100% - 10px);
            min-width: 1024px;
            min-height: 560px;
            padding: 5px;
            margin: 0;
        }
        #data {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            height: calc(100% - 2px);
        }
        
        table {
            width: 100%;
            padding: 0;
            border-spacing: 0;
        }   
        
        table * {
            border: 1px solid #000;
        }
        
        table thead, table tfoot {
            background: #f6f6f6;
        }
        
        table tbody {
            margin: 0;
            padding: 0;
            flex: 1;
            overflow-y: auto;
        }
    </style>
</head>
 
<body>
    <div id="data">
        <table>
            <thead>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>8</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>10</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>11</td>
                    <td>12</td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
 
</html>

Добавлено через 36 минут
Без разделения таблицы никак не решить?
Иначе, если сделать три разных таблицы для thead, tbody и tfoot, то задуманное реализовать получается. Только есть один нюанс с ползунком справа, из-за него не совпадают внутренние границы столбцов между таблицами.

@AlexZaw · 31.08.2018, 00:38

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

Без разделения таблицы никак не решить?

Никак, таблицу вы не можете ограничить в размерах. Она всегда будет занимать места не меньше чем ее контент (если вы конечно не ограничиваете по размеру обертку таблицы)

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

Только есть один нюанс с ползунком справа, из-за него не совпадают внутренние границы столбцов между таблицами.

Можете задать ширины верхней и нижней таблицы с помощью calc где вычесть ширину скролла

@berkut_174 · 31.08.2018, 10:29 **[ТС]**

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

Можете задать ширины верхней и нижней таблицы с помощью calc где вычесть ширину скролла

Да, но скролл появляется при необходимости, то есть может быть два варианта ширины, либо придётся показывать его всегда...
Спасибо за ответ, я понял.

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .