Есть ли css3 способ исправить <thead>на оси Y, позволить ему прокручивать на оси X? - PullRequest
Новая
       6

Есть ли css3 способ исправить <thead>на оси Y, позволить ему прокручивать на оси X?

4 голосов
/ 18 апреля 2011

Об этом спрашивали миллионы раз: здесь , там , и в другом месте только на SO. Тем не менее, я не могу найти действительно хорошего ответа.

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

Чтобы получить эффект, у меня есть десятки строк JS, включая setInterval( ) вызовы для проверки scrollLeft и scrollTop, чтобы я мог изменить копию из <thead> 1 . Это работает, но это огромная, неуклюжая, хрупкая и непреодолимая боль в заднице.

Вопрос: Есть ли какой-нибудь простой способ css3, существующий или возникающий или предлагаемый, который я могу использовать, чтобы получить таблицы <thead> и <tbody> для горизонтальной и вертикальной прокрутки, но независимо друг от друга ? Спасибо!

1 Почему setInterval( )? Поскольку IE не доставляет onScroll событий единообразно, вы глупы; все это знают!

Ответы [ 2 ]

2 голосов
/ 21 июля 2011

В итоге я смоделировал «решение» по предложению @Naveed Ahmad. Я помещаю часть данных таблицы в

; и сделал подделку , которую я заполнил во время onLoad, ссылаясь на ширину и смещение s в первой строке таблицы, например: 
function position_col_heads ( ) {
  // get all the TD child elements from the first row
  var tds = main_tbody.children[0].getElementsByTagName('TD'); 
  for ( var i = 0; i < tds.length; ++i ) {
    thead.children[i].style.left =
      parseFloat( tds[i].offsetLeft ) + 'px';
    thead.children[i].style.width = 
      parseFloat( tds[i].scrollWidth ) + 'px';
  }
}

Это работает более или менее ОК на этой странице .

1 голос
/ 18 апреля 2011

грязный способ - поместить таблицу заголовков в отдельный div, например: 

<div class="header">
<table>
    <thead><tr><td>#</td><td>v</td></tr></thead>
</table>
</div>

Тогда тело в другом div вроде: 

<div class="body">
    <table>
        <tbody>
            <tr><td>1</td><td>a</td></tr>
            <tr><td>1</td><td>a</td></tr>
            <tr><td>1</td><td>a</td></tr>
            <tr><td>1</td><td>a</td></tr>
            <tr><td>1</td><td>a</td></tr>         
    </tbody>
</table> 
</div>

Теперь вы можете задать фиксированную высоту тела div и установить oveflow на auto. как: 

table{border:0px solid #ccc;height:30px;}
table tr td{border:1px solid #ccc;padding:5px;}
div.body{height:70px;overflow:auto;border-bottom:1px solid #ccc;}

вот рабочий пример, который я сделал в jsfiddle

...