верстка таблицы

15.07.2013, 21:33. **Показов** 1767. **Ответов** 3

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

Добрый день!
Есть таблица, сверстанная. Необходимо доработать, чтобы первые пара колонок оставались на месте, остальная часть могла прокручиваться горизонтальной полосой. Всего 15 строк, поэтому нет необходимости в вертикальной полосе.
Javascript и ему подобные плагины использовать нельзя.
Вот при такой верстке смог закрепить:

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
  <table border="1">
   <tr>
        <th colspan="2">Заголовок 1</th>
        <th>Заголовок 2</th>
        <th>Заголовок 3</th>
   </tr>
   <tr>
        <th>Подзаголовок 1.1</th>
        <th>Подзаголовок 1.2</th>
        <th>Подзаголовок 2</th>
        <th>Подзаголовок 3</th>
   </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
   </tr>
    <tr>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
   </tr>
    <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
   </tr>
  </table>

Таким образом, необходимо, чтобы, к примеру, "Заколовок1" и "Заголовок2" были закреплены, остальные могли перемещаться.

Есть вариант сделать с position:absolute для "привязанных" колонок, но вся загвоздка в том, что нужно сделать один стиль для закрепленного заголовка, подзаголовка, т.к. таблица формируется по сложной логике в циклах.

Может кто подскажет, буду признателен за помощь!

@newJS · 15.07.2013, 21:48

есть такая тема, может поможет

@flashcsgroup · 16.07.2013, 13:46

ну и может быть overflow ...

@maximus2011 · 16.07.2013, 19:30

думаю надо на дивах сделать и не париться

Новые блоги и статьи Все статьи Все блоги /
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, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	15.07.2013, 21:48
	есть такая тема, может поможет 0

@flashcsgroup 20 / 20 / 5 Регистрация: 18.04.2013 Сообщений: 496
	16.07.2013, 13:46
	думаю, что display:table \| table-caption \| table-cell \| table-column-group \| table-column \| table-footer-group \| table-header-group \| table-row \| table-row-group и inline-table должны тебе помочь в этом деле ну и может быть overflow ... 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	16.07.2013, 19:30
	думаю надо на дивах сделать и не париться 0