0
Есть ли в любом случае вертикальное прокручивание абсолютно расположенных заголовков таблицы (th) в прокручиваемом div?Вертикально прокручивать абсолютно расположенные заголовки таблицы (th) в прокручиваемом div
Я не могу получить div, чтобы скрыть th, и они не будут прокручиваться вертикально с содержимым. Я хочу, чтобы колонка TH оставалась неподвижной на горизонтальной прокрутке (и это прекрасно работает), я просто не хочу, чтобы они оставались неподвижными на свитке.
У меня есть пример здесь:
http://jsfiddle.net/tsnevillecom/EHSN4/1/
HTML
<div class="outer">
<div class="inner">
<table id="compareTable">
<tr>
<th class="question">This is a long question</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th class="header">Header A</th>
<td>col 1 - A</td>
<td>col 2 - A (WITH LONGER CONTENT)</td>
<td>col 3 - A</td>
<td>col 4 - A</td>
<td>col 5 - A</td>
</tr>
<tr>
<th class="question">This is a long question</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th class="header">Header B</th>
<td>col 1 - B</td>
<td>col 2 - B</td>
<td>col 3 - B</td>
<td>col 4 - B</td>
<td>col 5 - B</td>
</tr>
<tr>
<th class="question">This is a long question</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th class="header">Header C</th>
<td>col 1 - C</td>
<td>col 2 - C</td>
<td>col 3 - C</td>
<td>col 4 - C</td>
<td>col 5 - C</td>
</tr>
<tr>
<th class="question">This is a long question</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th class="header">Header D</th>
<td>col 1 - D</td>
<td>col 2 - D (WITH LONGER CONTENT)</td>
<td>col 3 - D</td>
<td>col 4 - D</td>
<td>col 5 - D</td>
</tr>
<tr>
<th class="question">This is a long question</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th class="header">Header E</th>
<td>col 1 - E</td>
<td>col 2 - E</td>
<td>col 3 - E</td>
<td>col 4 - E</td>
<td>col 5 - E</td>
</tr>
<tr>
<th class="question">This is a long question</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th class="header">Header F</th>
<td>col 1 - F</td>
<td>col 2 - F</td>
<td>col 3 - F</td>
<td>col 4 - F</td>
<td>col 5 - F</td>
</tr>
<tr>
<th class="question">This is a long question</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th class="header">Header G</th>
<td>col 1 - G</td>
<td>col 2 - G (WITH LONGER CONTENT)</td>
<td>col 3 - G</td>
<td>col 4 - G</td>
<td>col 5 - G</td>
</tr>
<tr>
<th class="question">This is a long question</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th class="header">Header H</th>
<td>col 1 - H</td>
<td>col 2 - H</td>
<td>col 3 - H</td>
<td>col 4 - H</td>
<td>col 5 - H</td>
</tr>
<tr>
<th class="question">This is a long question</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th class="header">Header I</th>
<td>col 1 - I</td>
<td>col 2 - I</td>
<td>col 3 - I</td>
<td>col 4 - I</td>
<td>col 5 - I</td>
</tr>
<tr>
<th class="question">This is a long question</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th class="header">Header J</th>
<td>col 1 - J</td>
<td>col 2 - J (WITH LONGER CONTENT)</td>
<td>col 3 - J</td>
<td>col 4 - J</td>
<td>col 5 - J</td>
</tr>
<tr>
<th class="question">This is a long question</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th class="header">Header K</th>
<td>col 1 - K</td>
<td>col 2 - K</td>
<td>col 3 - K</td>
<td>col 4 - K</td>
<td>col 5 - K</td>
</tr>
<tr>
<th class="question">This is a long question</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th class="header">Header L</th>
<td>col 1 - L</td>
<td>col 2 - L</td>
<td>col 3 - L</td>
<td>col 4 - L</td>
<td>col 5 - L</td>
</tr>
<tr>
<th class="question">This is a long question</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th class="header">Header M</th>
<td>col 1 - M</td>
<td>col 2 - M (WITH LONGER CONTENT)</td>
<td>col 3 - M</td>
<td>col 4 - M</td>
<td>col 5 - M</td>
</tr>
<tr>
<th class="question">This is a long question</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th class="header">Header N</th>
<td>col 1 - N</td>
<td>col 2 - N</td>
<td>col 3 - N</td>
<td>col 4 - N</td>
<td>col 5 - N</td>
</tr>
<tr>
<th class="question">This is a long question</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th class="header">Header O</th>
<td>col 1 - O</td>
<td>col 2 - O</td>
<td>col 3 - O</td>
<td>col 4 - O</td>
<td>col 5 - O</td>
</tr>
<tr>
<th class="question">This is a long question</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th class="header">Header P</th>
<td>col 1 - P</td>
<td>col 2 - P (WITH LONGER CONTENT)</td>
<td>col 3 - P</td>
<td>col 4 - P</td>
<td>col 5 - P</td>
</tr>
<tr>
<th class="question">This is a long question</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th class="header">Header Q</th>
<td>col 1 - Q</td>
<td>col 2 - Q</td>
<td>col 3 - Q</td>
<td>col 4 - Q</td>
<td>col 5 - Q</td>
</tr>
<tr>
<th class="question">This is a long question</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th class="header">Header R</th>
<td>col 1 - R</td>
<td>col 2 - R</td>
<td>col 3 - R</td>
<td>col 4 - R</td>
<td>col 5 - R</td>
</tr>
<tr>
<th class="question">This is a long question</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th class="header">Header S</th>
<td>col 1 - S</td>
<td>col 2 - S (WITH LONGER CONTENT)</td>
<td>col 3 - S</td>
<td>col 4 - S</td>
<td>col 5 - S</td>
</tr>
<tr>
<th class="question">This is a long question</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th class="header">Header T</th>
<td>col 1 - T</td>
<td>col 2 - T</td>
<td>col 3 - T</td>
<td>col 4 - T</td>
<td>col 5 - T</td>
</tr>
<tr>
<th class="question">This is a long question</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th class="header">Header U</th>
<td>col 1 - U</td>
<td>col 2 - U</td>
<td>col 3 - U</td>
<td>col 4 - U</td>
<td>col 5 - U</td>
</tr>
</table>
</div>
</div>
CSS
#compareTable {
table-layout: fixed;
width: 100%;
border-collapse:collapse;
*margin-left: -100px;/*ie7*/
}
td, th {
vertical-align: top;
padding:10px;
height:30px;
width:100px;
}
th {
position:absolute;
*position: relative; /*ie7*/
left:0;
height:100%;
width:100px;
background-color:#fafafa;
}
.outer {
position:relative;
}
.question{
display:block;
height:30px;
width:100%;
text-align:left;
}
.inner {
overflow-x:scroll;
overflow-y:auto;
width:380px;
height:320px;
margin-left:120px;
}
JS
$(document).ready(function() {
tableWidth = $("#compareTable").outerWidth() - 140;
$('.question').width(tableWidth);
$(".header").each(function() {
thisPadding = parseInt($(this).css("padding-top"));
thisHeight = $(this).parent("tr").height();
$(this).height(thisHeight-thisPadding*2);
});
});