Вопросы Теги

Заголовки HTML-таблицы, всегда видимые наверху окна при просмотре большой таблицы

У меня была эта проблема из-за копирования библиотеки Android в новый проект. Visual Studio автоматически создала мне новый файл ресурсов, что привело к возникновению проблем с неоднозначностью между файлом ресурсов проекта 1 и файлом проекта 2. После решения этой проблемы у меня больше не было ошибки Java Stub. Я не знаю, было ли это исправить, но я больше ничего не делал, так что это должно быть почти так, хотя это немного странно.

167
задан Christopher Rapcewicz 10 December 2013 в 18:11
поделиться

5 ответов

Я столкнулся с этой проблемой совсем недавно. К сожалению, мне пришлось сделать 2 таблицы, одну для заголовка и одну для тела. Возможно, это не лучший подход, но вот он: 

    о, привет    
 
 
  заголовок col   col header  
  
 
  data1   data1  
 
  data2   data2

Это сработало для меня, вероятно, это не изящный способ, но он работает. Я займусь исследованием, чтобы посмотреть, смогу ли я сделать что-то лучше, но это позволяет использовать несколько таблиц.

Прочтите статью overflow , чтобы узнать, соответствует ли она вашим потребностям

Возможно, это не изящный способ, но он работает. Я займусь исследованием, чтобы посмотреть, смогу ли я сделать что-то лучше, но это позволяет использовать несколько таблиц.

Прочтите статью overflow , чтобы узнать, соответствует ли она вашим потребностям

Возможно, это не изящный способ, но он работает. Я займусь исследованием, чтобы посмотреть, смогу ли я сделать что-то лучше, но это позволяет использовать несколько таблиц.

Прочтите статью overflow , чтобы узнать, соответствует ли она вашим потребностям

5
ответ дан 23 November 2019 в 21:00
поделиться

Использование display: fixed в разделе thead должно работать, но для его работы только с текущей таблицей в представлении вам понадобится помощь JavaScript. И это будет сложно, потому что нужно будет выяснить места прокрутки и расположение элементов относительно области просмотра, что является одной из основных областей несовместимости браузеров.

Взгляните на популярные JavaScript-фреймворки (jQuery, MooTools, YUI и т. Д.), Чтобы узнать, могут ли они делать то, что вы хотите, или облегчить выполнение того, что вы хотите.

2
ответ дан 23 November 2019 в 21:00
поделиться

Если вы используете полноэкранную таблицу, вас может заинтересовать установка th для отображения: fixed; и вверху: 0; или попробуйте очень похожий подход через css.

Обновление

Просто быстро создайте рабочее решение с помощью iframe (html4.0). Этот пример НЕ соответствует стандарту, однако вы легко сможете его исправить:

outer.html 

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Outer</title>
  <body>
    <iframe src="test.html" width="200" height="100"></iframe>
    </body>
</html>

test.html 

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Floating</title>
    <style type="text/css">
      .content{
        position:relative; 
      }

      thead{
        background-color:red;
        position:fixed; 
        top:0;
      }
    </style>
  <body>
    <div class="content">      
      <table>
        <thead>
          <tr class="top"><td>Title</td></tr>
        </head>
        <tbody>
          <tr><td>a</td></tr>
          <tr><td>b</td></tr>
          <tr><td>c</td></tr>
          <tr><td>d</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
        </tbody>
      </table>
    </div>
    </body>
</html>
2
ответ дан 23 November 2019 в 21:00
поделиться

Я сделал пробное решение, используя jQuery .

См. Пример здесь.

Теперь у меня есть этот код в Mercurial bitbucket репозиторий . Главный файл - tables.html .

Я знаю об одной проблеме с этим: если таблица содержит якоря, и если вы открываете URL-адрес с указанным якорем в браузере, когда страница загружается, строка с привязкой, вероятно, будет закрыта плавающим заголовком.

Обновление 2017-12-11: Я вижу, что это не работает с текущими версиями Firefox (57) и Chrome (63). Не знаю, когда и почему это перестало работать, или как это исправить. Но теперь я думаю, что принятый ответ Хенди Ираван лучше.

135
ответ дан 23 November 2019 в 21:00
поделиться

Возможные альтернативы

js-float-table-headers

js-float-table-headers (Google Code)

В Drupal

у меня есть сайт Drupal 6. Я был на странице «Модули» администратора и заметил, что в таблицах есть именно такая функция!

Глядя на код, кажется, что она реализована файлом с именем tableheader.js . Он применяет эту функцию ко всем таблицам с классом с липким доступом .

Для сайта Drupal я хотел бы иметь возможность использовать этот модуль tableheader.js как есть для пользовательского контента. tableheader.js , похоже, не присутствует на страницах пользовательского контента в Drupal. Я разместил сообщение на форуме , чтобы спросить, как изменить тему Drupal, чтобы она стала доступной. Согласно ответу, tableheader. js можно добавить в тему Drupal с помощью drupal_add_js () в файле template.php темы следующим образом: 

drupal_add_js('misc/tableheader.js', 'core');
5
ответ дан 23 November 2019 в 21:00
поделиться
Другие вопросы по тегам:

Похожие вопросы: