Зафиксируйте верхнюю строку только для таблицы html (фиксированная прокрутка заголовка таблицы)

Я хочу сделать html-таблицу с замороженной верхней строкой (поэтому, когда вы прокручиваете вниз по вертикали, вы всегда можете ее увидеть).

Есть ли умный способ сделать это без javascript?

Обратите внимание, что мне НЕ нужен замороженный левый столбец.

ОТВЕТЫ

Ответ 1

Это называется фиксированной прокруткой заголовка. Существует ряд документированных подходов:

http://www.imaputz.com/cssStuff/bigFourVersion.html

Вы не сможете эффективно справиться с этим без JavaScript... особенно если вы хотите кросс-браузерную поддержку.

Существует целый ряд проблем с любым подходом, который вы используете, особенно в отношении кросс-браузерной/версии поддержки.

Редактировать:

Даже если это не заголовок, который вы хотите исправить, а первая строка данных, концепция остается той же. Я не был на 100%, что вы имели в виду.

Еще одна мысль, что моей компании было поручено найти решение для этого, которое могло бы работать в IE7+, Firefox и Chrome.

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

//float this one right over second table
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
</table>

<table>
//Data
</table>

В качестве альтернативы можно использовать некоторые теги tbody и thead, но это тоже недостаток, потому что IE не позволит вам поместить полосу прокрутки на tbody, что означает, что вы не можете ограничить его высоту (глупо IMO).

<table>
  <thead style="do some stuff to fix its position">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  </thead>
  <tbody style="No scrolling allowed here!">
     Data here
  </tbody>
</table>

Этот подход имеет много проблем, таких как обеспечение ТОЧНОЙ ширины пикселя, потому что таблицы настолько милы, что разные браузеры будут распределять пиксели по-разному на основе вычислений, и вы просто НЕ МОЖЕТЕ гарантировать (AFAIK), что распределение будет идеальным во всех случаях. Это становится очевидно очевидным, если у вас есть границы внутри таблицы.

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

Есть кто-то, кто создал Slick Grid, который очень похож на мой, и вы можете использовать и хороший (хотя и сложный) пример для достижения этой цели.

https://github.com/6pac/SlickGrid/wiki

Ответ 3

Моей заботой было не иметь камеры с фиксированной шириной. Который, казалось, не работает в любом случае. Я нашел это решение, которое, кажется, то, что мне нужно. Я публикую это здесь для тех, кто ищет пути. Проверьте эту скрипку

Рабочий фрагмент:

html, body{
  margin:0;
  padding:0;
  height:100%;
}
section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: #500;
}
section.positioned {
  position: absolute;
  top:100px;
  left:100px;
  width:800px;
  box-shadow: 0 0 15px #333;
}
.container {
  overflow-y: auto;
  height: 160px;
}
table {
  border-spacing: 0;
  width:100%;
}
td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: #ddd;
  color: #000;
  padding: 10px 25px;
}
th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid #800;
}
th:first-child div{
  border: none;
}
<section class="">
  <div class="container">
    <table>
      <thead>
        <tr class="header">
          <th>
            Table attribute name
            <div>Table attribute name</div>
          </th>
          <th>
            Value
            <div>Value</div>
          </th>
          <th>
            Description
            <div>Description</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>align</td>
          <td>left, center, right</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
        </tr>
        <tr>
          <td>bgcolor</td>
          <td>rgb(x,x,x), #xxxxxx, colorname</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
        </tr>
        <tr>
          <td>border</td>
          <td>1,""</td>
          <td>Specifies whether the table cells should have borders or not</td>
        </tr>
        <tr>
          <td>cellpadding</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
        </tr>
        <tr>
          <td>cellspacing</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between cells</td>
        </tr>
        <tr>
          <td>frame</td>
          <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
          <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
        </tr>
        <tr>
          <td>rules</td>
          <td>none, groups, rows, cols, all</td>
          <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
        </tr>
        <tr>
          <td>summary</td>
          <td>text</td>
          <td>Not supported in HTML5. Specifies a summary of the content of a table</td>
        </tr>
        <tr>
          <td>width</td>
          <td>pixels, %</td>
          <td>Not supported in HTML5. Specifies the width of a table</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

Ответ 4

Начиная с 2019 года, лучший ответ, который я нашел, был @shahriyar-ahmed с использованием position:sticky CSS position:sticky:

fooobar.com/questions/311314/...

Он использовал этот CSS:

/*This will work on every browser but Chrome Browser*/
.table-fixed thead {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 999;
  background-color: #000;
  color: #fff;
}

/*This will work on every browser*/
.table-fixed thead th {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 999;
    background-color: #000;
    color: #fff;
}
<table class="table-fixed">
  <thead>
    <tr>
        <th>Table Header 1</th>
        <th>Table Header 2</th>
        <th>Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
  </tbody>
</table>

Ответ 5

Можно использовать position:fixed в <th> (<th>, являющийся верхней строкой).

Вот пример

Ответ 6

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

#headings {
  position: fixed;
  top: 0px;
  width: 960px;
}

как @ptriek сказал, что это будет работать только для столбцов с фиксированной шириной.

Ответ 7

Плагин jQuery Chromatable позволяет фиксированный заголовок (или верхний ряд) с шириной, которая разрешает проценты, только процент от 100%.

http://www.chromaloop.com/posts/chromatable-jquery-plugin

Я не могу представить, как вы могли бы сделать это без javascript.

update: новая ссылка → http://www.jquery-plugins.info/chromatable-00012248.htm

Ответ 8

Я использую это:

tbody{
  overflow-y: auto;
  height: 350px;
  width: 102%;
}
thead,tbody{
    display: block;
}

Я определяю ширину столбцов с помощью бутстрапа css col-md-xx. Без определения ширины столбцов автоширина не совпадает с. 102% процентов - это то, что вы теряете сапс с переполнением

Ответ 9

Использование стиля css zebra

Скопируйте этот пример в этот пример и убедитесь, что заголовок исправлен.

       <style>
       .zebra tr:nth-child(odd){
       background:white;
       color:black;
       }

       .zebra tr:nth-child(even){
       background: grey;
       color:black;
       }

      .zebra tr:nth-child(1) {
       background:black;
       color:yellow;
       position: fixed;
       margin:-30px 0px 0px 0px;
       }
       </style>


   <DIV  id= "stripped_div"

         class= "zebra"
         style = "
            border:solid 1px red;
            height:15px;
            width:200px;
            overflow-x:none;
            overflow-y:scroll;
            padding:30px 0px 0px 0px;"
            >

                <table>
                   <tr >
                       <td>Name:</td>
                       <td>Age:</td>
                   </tr>
                    <tr >
                       <td>Peter</td>
                       <td>10</td>
                   </tr>
                </table>

    </DIV>

Обратите внимание на верхнее заполнение 30px в листьях div пространство, которое используется 1-й строкой разделенных данных т.е. tr: nth-child (1), который является "фиксированной позицией", и отформатирован с точностью до -30px

Ответ 10

Вы можете использовать position: sticky; для первого ряда таблицы MDN ref:

.table-class tr:first-child>td{
    position: sticky;
    top: 0;
}