Как мы можем заморозить первый столбец и заголовок (которые имеют несколько строк) в таблице html

Я пробовал так много решений, чтобы заморозить первый столбец и заголовок (которые имеют несколько строк), но в каждом решении у меня есть пользовательский css (css согласно решениям).Как мы можем заморозить первый столбец и заголовок (которые имеют несколько строк) в таблице html

В моем случае я не могу изменить свой предыдущий css. Я хочу код, в котором на div-прокрутке я могу заморозить таблицу (которая является динамической).

Просьба предоставить решение.

источник

2012-05-16 user1397770

Вы могли бы просто использовать, как это: 'document.getElementById ('yourId') style.position = 'фиксированный';' вместо того, чтобы использовать в вашем CSS. Также проверьте это http://stackoverflow.com/questions/673153/html-table-with-fixed-headers Вышеприведенный код является лишь примером использования функции css в javascript. – Vimalnath

мой стол динамически сгенерирован .. эти не работают – user1397770

Я сделал это так:

<table style="table-layout: fixed"> 
    <tr> 
     <td><div style="width:100px; position:fixed;">Frozen Header text</div></td> 
    </tr> 
    <tr> 
     <td>Some data</td> 
    </tr> 
<table>

Я не уверен, как получить первый столбец заморожен, как хорошо, но я полагаю, вы можете попытаться использовать ту же стратегию, а также форматирование с помощью <col> тег, похожее на это:

<col style="width:100px; position:fixed;" />

Попробуйте сделать это, и, пожалуйста, дайте нам знать, как вы идете.

источник

2012-05-16 06:06:17 Renato

не работает .. у меня есть следующая структура типа – user1397770

-2

Fix header относительно прост и прост в применении. и колонка - другая вещь.

, например:

<table> 
    <tr class="header"><td>header</td></tr> 
    <tr><td>body</td></tr> 
</table>

Вы должны контролировать OnScroll envent, и обнаружить, если заголовок из поля зрения. Когда он выходит из поля зрения, извлеките параметры размера tr.header (также включите TD внутри) и его clientX и clientY, используя getBoundingClientRect(). сделайте клон tr.header, используя cloneElement (true) и поместите его в ту же таблицу. затем назначьте параметры размера своим ТД и сделайте этот клонированный элемент зафиксированным на экране.

Это решение не повлияет на ваши стили и макеты таблицы, в то время как это действительно сложно.

источник

2012-05-16 06:17:49 xiaoyi

Это описание не считается «относительно простым»! Если это просто, почему бы не привести полный пример? И если это не просто, почему бы не привести полный пример? –

@AndrewLeach: это относительно просто сравнение с фиксированным столбцом. Но это все еще сложно для полного и общего ответа. Мое описание можно превратить в рабочий скрипт с небольшой работой.Не будьте слишком осуждающими! – xiaoyi

Для достижения того, что я использую jquery и css кометы. Здесь плагин: link

Это плагин jQuery, который не позволяет прокручивать строки и столбцы таблицы.

Он может принимать заданный объект таблицы HTML и устанавливать его так, чтобы он мог заморозить заданное количество столбцов или строк или и то, и другое, поэтому фиксированные столбцы или строки не прокручиваются.

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

Он также может заморозить строки и столбцы в сочетании с использованием атрибутов colspan или rowspan. .

источник

2016-10-11 18:00:15

Как мы можем заморозить первый столбец и заголовок (которые имеют несколько строк) в таблице html

ответ

Смежные вопросы