2011-01-04 4 views
-3

У меня есть проблема в CSS, у меня есть большой стол со многими перевалами, мне нужно заморозить некоторый COLS и когда страница прокручивается не будет movied, но я не могу, как сделать этопроблема в стиле таблицы

+0

Может быть, вы можете задать свой вопрос в правильных предложениях? Кроме того, не совсем понятно, чего вы хотите достичь. –

+2

@Polybos: Достаточно сказать «Пожалуйста, уточните свой вопрос»; 95% населения мира не говорят по-английски так же хорошо, как и вы, поэтому нет необходимости расстраиваться. –

+1

@ Аараон Дигулла: Хорошо: –

ответ

1

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

Вертикальный

Это невозможно с одной таблицей, так как точка таблицы его, чтобы сохранить все ячейки одной строки (по горизонтали) всегда на той же высоте.

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

Если вам нужно значениям оставаться фиксированными для вертикальной прокрутки, попробуйте следующее: Вы можете также использовать рамки JavaScript, как JQuery, чтобы заметить, когда пользователь прокручивает страницу, а затем скопировать содержание клеток. Поэтому, когда ячейки фактически перемещаются, первая видимая клетка всегда содержит одно и то же значение.

Горизонтальные

Если вам нужно первым (несколько) колонки (ы) фиксированной во время прокрутки по горизонтали (то есть заголовки столбцов, как в Excel), использовать JQuery для перебора ячеек в первом столбце, чтобы их размер и положение, а затем добавить абсолютно позиционированное div s слева от стола (просто приведите всю таблицу, чтобы освободить место для них).

Проверить this blog post.

+0

Должен признаться: ваш ответ намного подробнее :) –

1

Вы просто объявляете позицию своего <td>, которая не должна перемещаться как фиксированная с помощью CSS.

Пример:

<html> 
    <head><style type='text/css'>.noMove { position:fixed; }</style></head> 
    <body> 
    <table> 
     <tr> 
      <td>Column 1</td> 
      <td class='noMove'>Column 2</td> 
     </tr> 
    </table> 
    </body> 
</html> 
+0

@ Аарон Да, это прекрасно работает: D –

+0

Вы также можете использовать свойство переполнения, чтобы прокручивать незамороженные биты. – rxgx

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