Как добавить полосу прокрутки в теле таблицы?

Это мой код:Как добавить полосу прокрутки в теле таблицы?

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

<table width="600" border="1" style="border-collapse:collapse; border: 1px solid #AEAEAE;" cellpadding="0" cellspacing="0"> 
<tr> 
    <th rowspan="2"> 
     Title 
    </th> 
    <th rowspan="2"> 
     Title 
    </th> 
    <th colspan="4"> 
     Title 
    </th> 
    <th colspan="2"> 
     Title 
    </th> 


</tr> 
<tr> 
    <th> 
     Title 
    </th> 
    <th> 
     Title 
    </th> 
    <th> 
     Title 
    </th> 
    <th> 
     Title 
    </th> 
    <th> 
     Title 
    </th> 
    <th> 
     Title 
    </th> 

</tr> 

     <td height="400"> 
      Body 
     </td> 
     <td> 
      Body 
     </td> 
     <td> 
      Body 
     </td> 
     <td> 
      Body 
     </td> 
     <td> 
      Body 
     </td> 
     <td> 
      Body 
     </td> 
     <td> 
      Body 
     </td> 
     <td> 
      Body 
     </td> 
    </tr>

источник

2013-08-15 Ronnie

Отступ ваш HTML четырьмя пробелами, когда вы разместите его так, чтобы он отображался как кодовый блок. Вы можете выбрать свой код и нажать кнопку ** {} ** на панели форматирования для отступов. – doppelgreener

Просто дайте стола TBODY элемент высоты и прокрутки переполнения. Как это:

.tableClass tbody 
{ 
    height: 300px; /* Random number I chose */ 
    overflow: scroll /* you can be more specific and use overflow-y */ 
}

Edit: Я видел ваш код и не используя < tbody> и < thead>. Читайте о них. Общая идея состоит в том, чтобы обернуть содержимое таблицы одним элементом и обернуть заголовки таблицы одним элементом.

Вот рабочий пример: http://www.imaputz.com/cssStuff/bigFourVersion.html

источник

2013-08-15 05:40:33 Itay

Спасибо за ваш ответ, но этот код предназначен для трех столбцов, посмотрите на мой пример, который я опубликовал. – Ronnie

@ Ronnie: Неважно, сколько столбцов у вас есть. Прочитайте мое редактирование – Itay

Bro не может бросить, не могли бы вы изменить этот код и отправить мне. – Ronnie

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

jQuery.scrollTableBody (GitHub)

До тех пор, пока у вас есть таблица с надлежащей <thead>, <tbody>, и (необязательно) <tfoot>, все, что вам нужно сделать, это:

$('table').scrollTableBody();

источник

2013-09-24 05:30:35

Как добавить полосу прокрутки в теле таблицы?

ответ

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