2010-02-10 3 views
1

У меня возникла проблема с прокруткой таблицы с переменным количеством строк и столбцов. Я попытался перебросить (auto AND scroll) и максимальную высоту и ширину в div, содержащий таблицу и таблицу. Я скопировал источник кода и мой класс css. Если кто-то может мне помочь, я буду признателен!Как прокручивать таблицу с переменным количеством строк и столбцов

<div class="divCuotas"> 
<table class="tablaCuotas" cellpadding="1px" cellspacing="0"> 
<tr style="background-color: rgb(153, 153, 153);"> 
<td class="fullTableTD"colspan = "2">Comercio</td> 
<td class="fullTableTD">10/02/2010</td> 
<td class="fullTableTD">10/02/2010</td> 
<td class="fullTableTD">10/02/2010</td> 
<td class="fullTableTD">10/02/2010</td> 
<td class="fullTableTD">10/02/2010</td> 
<td class="fullTableTD">10/02/2010</td> 
<td class="fullTableTD">10/02/2010</td> 
<td class="fullTableTD">10/02/2010</td> 
<td class="fullTableTD">10/02/2010</td> 
<td class="fullTableTD">10/02/2010</td> 
<td class="fullTableTD">10/02/2010</td> 
<td class="fullTableTD">10/02/2010</td> 
<td class="fullTableTD">10/02/2010</td> 
<td class="fullTableTD">10/02/2010</td> 
<td class="fullTableTD">10/02/2010</td> 
<td class="fullTableTD">10/02/2010</td> 
<td class="fullTableTD">10/02/2010</td> 
<td class="fullTableTD">10/02/2010</td> 
</tr> 
<tr class = "dataTables"> 
<td rowspan="2">Fravega</td><td>Cuota</td> 
<td>1/9</td> 
<td>2/9</td> 
<td>3/9</td> 
<td>4/9</td> 
<td>5/9</td> 
<td>6/9</td> 
<td>7/9</td> 
<td>8/9</td> 
<td>9/9</td> 
<td>10/9</td> 
<td>11/9</td> 
<td>12/9</td> 
<td>13/9</td> 
<td>14/9</td> 
<td>15/9</td> 
<td>16/9</td> 
<td>17/9</td> 
<td>18/9</td> 
</tr> 
<tr class = "dataTables"> 
<td>$</td> 
<td>10</td> 
<td>10</td> 
<td>10</td> 
<td>10</td> 
<td>10</td> 
<td>10</td> 
<td>10</td> 
<td>10</td> 
<td>10</td> 
<td>10</td> 
<td>10</td> 
<td>10</td> 
<td>10</td> 
<td>10</td> 
<td>10</td> 
<td>10</td> 
<td>10</td> 
<td>10</td> 
</tr> 
<tr class = "dataTables"> 
<td rowspan = "2">Garbarino</td> 
<td>Cuota</td> 
<td>1/2</td> 
<td>2/2</td> 
</tr> 
<tr class = "dataTables"> 
<td>$</td> 
<td>13</td> 
<td>13</td> 
</tr> 
</table> 
</div> 

Вот CSS:

.tablaCuotas{ 
    line-height:15px; 
    overflow:scroll; 
    height:100px; 
    width:100px; 
    margin-bottom: 5px; 
    display: inline-table; 
    background-color:#ededed; 
} 

.divCuotas{ 
    overflow:scroll; 
    height:100px; 
    width:100px; 
    font-weight:normal; 
    margin-bottom: 20px; 
    display: inline-table; 
    text-align:center; 
} 

ответ

1

display:inline-table в DIV является то, что испортить ваш макет.

Удалите его, и это будет хорошо ..

Вы поворачиваете DIV в таблицу и таблицы не позволяют скроллинг ..

+0

ДА !! thank youuuuu ты спас меня !! genious :) – Nicole

+0

только еще один вопрос ... как я могу получить свой текст вопроса, чтобы иметь цвета и не интерпретировать код html? потому что кто-то меня ждал, и я никогда не узнавал, как это сделать. Благодаря! – Nicole

+0

Я отредактировал это для вас. Вам нужно выбрать свой код и нажать кнопку в верхней строке редактора, в которой есть 1 и 0. Посмотрите http://stackoverflow.com/editing-help –

0

Положите его в TBODY

<tbody style="height:100px;overflow:scroll"> 

и проверить этот http://www.imaputz.com/cssStuff/bigFourVersion.html и это http://codylindley.com/blogstuff/css/pushpin/pushpin.html

+0

хорошо, для этого, например, я бы на самом деле добавить в CSS TBODY {height: 100px; overflow: scroll;} - но мне просто не нравится стиль в моем файле разметки/структуры :) –

+0

дорогой Марк, я согласен, но набирать этот путь был просто быстрым ответом. Николя затем сделает все остальное. Спасибо – ntan

+0

Единственный недостаток прокручиваемых таблиц заключается в том, что они не являются текучими. Кроме этого, Марк прибил его. – questzen

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