Прокручиваемая таблица с фиксированным заголовком

Я искал некоторые решения в PHP / HTML / CSS для этого, но пока ничего не получалось, возможно, потому что в большинстве этих примеров было так много кода, поэтому я заблудился в нем. Может ли кто-нибудь объяснить мне, что мне нужно сделать, или разместить здесь простой пример кода?

 Simon M24 окт. 2012 г., 08:14
Язык существо?
 Michal S24 окт. 2012 г., 08:25
Я пробовал этоimaputz.com/cssStuff/bigFourVersion.html# но я совершенно нене понимаюнет объяснений, я неНе знаю, какая часть кода делает то, что мне нужно. Я пытался реализовать эти блоки CSS в своем коде, но это только полностью сломало таблицу.
 Michal S24 окт. 2012 г., 08:18
PHP, извините .. или может быть HTML / CSS может быть достаточно :)

Ответы на вопрос(2)

Решение Вопроса

Этот код (взят из ссылки в вашем комментарии) является базовым кодом, который вам нужен. В следующий раз вам нужно разобраться с подобными вещами, просто удалите сегменты кода, чтобы увидеть, что ломается, и оставьте все, что нене сломайте то, что вам нужно.




div.tableContainer {
    clear: both;
    border: 1px solid #963;
    height: 285px; /* html>body tbody.scrollContent height plus 23px for the header */
    overflow: auto;
    width: 756px /* Remember to leave 16px for the scrollbar! */
}

html>body tbody.scrollContent {
    display: block;
    height: 262px;
    overflow: auto;
    width: 100%
}


html>body thead.fixedHeader tr {
    display: block
}

html>body thead.fixedHeader th { /* TH 1 */
    width: 200px
}

html>body thead.fixedHeader th + th { /* TH 2 */
    width: 240px
}

html>body thead.fixedHeader th + th + th { /* TH 3 +16px for scrollbar */
    width: 316px
}

html>body tbody.scrollContent td { /* TD 1 */
    width: 200px
}

html>body thead.scrollContent td + td { /* TD 2 */
    width: 240px
}

html>body thead.scrollContent td + td + td { /* TD 3 +16px for scrollbar */
    width: 316px
}






    
        
            <a href="#">Header 1</a>
            <a href="#">Header 2</a>
            <a href="#">Header 3</a>
        
    
    
        
            Cell Content 1
            Cell Content 2
            Cell Content 3
        
        
            More Cell Content 1
            More Cell Content 2
            More Cell Content 3
        
        .........
    




 Simon M26 окт. 2012 г., 04:02
Не беспокойтесь, у меня были такие же проблемы при изучении HTML / CSS / JS несколько лет назад, и я до сих пор имею их с другими языками ... Чем больше вы это делаете, тем легче становится.
 Michal S25 окт. 2012 г., 09:27
Спасибо вам большое! Я провел так много времени с этим без результата :) Так оно и естьГораздо проще понять код :)
Фиксированный заголовок таблицы с использованием CSS

position: sticky; вашth элементы:

.tableFix { /* Scrollable parent element */
  position: relative;
  overflow: auto;
  height: 100px;
}

.tableFix table{
  width: 100%;
  border-collapse: collapse;
}

.tableFix th,
.tableFix td{
  padding: 8px;
  text-align: left;
}

.tableFix thead th {
  position: sticky;  /* Edge, Chrome, FF */
  top: 0px;
  background: #fff;  /* Some background is needed */
}
<div class="tableFix">

  <table>
    <thead>
      <tr><th>H1</th><th>Header 2</th><th>Header 3</th><th>4</th><th>5th Header</th></tr>
    </thead>
    <tbody>
      <tr><td>R1C2</td><td>R1C2</td><td>R1C3</td><td>R1C4</td><td>R1C5</td></tr>
      <tr><td>R2C1</td><td>R2C2</td><td>R2C3</td><td>R2C4</td><td>R2C5</td></tr>
      <tr><td>R3C1</td><td>R3C2</td><td>R3C3</td><td>R3C4</td><td>R3C5</td></tr>
      <tr><td>R4C1</td><td>R4C2</td><td>R4C3</td><td>R4C4</td><td>R4C5</td></tr>
      <tr><td>R5C1</td><td>R5C2</td><td>R5C3</td><td>R5C4</td><td>R5C5</td></tr>
      <tr><td>R6C1</td><td>R6C2</td><td>R6C3</td><td>R6C4</td><td>R6C5</td></tr>
    </tbody>
  </table>

</div>

Таблица с фиксированным заголовком для старых браузеров

Еслибраузеры, которые вы должны поддерживать не охватывают позициюsticky значение, вы можете взглянуть наИсправить заголовок таблицы, используя немного Javascript

Ваш ответ на вопрос