Scroll Таблица с HTML/CSS

У меня есть таблица вроде этого:Scroll Таблица с HTML/CSS

enter image description here

То, что я хочу сделать, это сделать его scrollabe после certing высоты или определенного количества строк, сохраняя велосипед заголовка - Автомобиль - грузовик виден. Я сделал достаточно поиска Google, видел другие сообщения переполнения стека, подобные этому one. Я пробовал решение jsfiddle.net в принятом ответе на этот пост. Но это делает мой стол выглядит следующим образом:

enter image description here

Вот ссылка на мой html код. Это может показаться неопрятным, я только что вставил данные таблицы, чтобы увидеть, работает ли прокрутка. Это номер tablestyle.css. Я думаю, что файл public.css не имеет ничего общего с этим искажением. Если это важно, я также отправлю его. Любые подсказки/подсказки оценены!

источник

2013-06-14 Arefin

Почему тэг php? –

Я думаю, если вы поместите свою таблицу в div и дадите этому div класс css с фиксированной высотой и переполнением: auto; исправит вашу проблему – Sora

смотрите здесь http://stackoverflow.com/questions/16878941/two-tables-vertically-aligned-how-to-synchronise-the-widths-spacing – bksi

Я добавил следующий CSS, чтобы исправить это:

В HTML я обернул первый tr с thead (не обязательно, но рекомендуется)

CSS:

table.list { 
    width:100%; 
} 
table.list thead { 
    display: table; 
    float: left; 
    width: 100%; 
} 
table.list thead th { 
    text-align: center; 
} 
table.list tbody { 
    float: left; 
    width: 100%; 
} 
table.list tbody tr { 
    display: table; 
    width: 100%; 
} 
table.list th, td { 
    width: 25%; 
}

Working Fiddle

Возможно, вы захотите сделать это исправлением кросс-браузера. Затем пройдите через это link.

источник

2013-06-14 07:14:44

Ваше решение отлично работает. Мне просто интересно, так как я буду вставлять эту таблицу внутри другой формат таблицы, насколько я знаю, если мы хотим отличить конфликтующие элементы css, мы используем id/class. Вы использовали только таблицу {widht: 100%;}, так будет ли она конфликтовать, когда я свяжу другие css-файлы, содержащие таблицу? – Arefin

@ Pro.metal Я так не думаю, но было бы лучше, если бы вы дали некоторый класс таблице в моем решении. –

@ Pro.metal проверить мое обновленное сообщение. Я предполагаю, что класс будет '.list 'здесь. (_Я еще не обновил скрипку_) Надеюсь, теперь вы поймете это лучше.:) –

попробовать это

Я изменил некоторые из ваших CSS

tbody#scrolling { height: 120px; overflow-x: hidden; overflow-y:scroll; display: block;} 
td#vehicles, th#vehicles { border: 0 none; height: 30px; min-width:153px; } 
thead{ 
    width:100%; 
    display:block; 
}

также добавил thead в table

здесь jsFiddle File

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

источник

2013-06-14 07:20:23

он работает, но все еще есть проблема. если количество строк меньше, то полоса прокрутки все еще существует. Решение Mr_Green не имеет этой проблемы. +1 для решения :) – Arefin

Scroll Таблица с HTML/CSS

ответ

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