it-swarm.com.ru

Прокрутка таблицы с помощью HTML и CSS

У меня есть такая таблица, которую я заполняю данными 

<table id="products-table"  style="overflow-y:scroll" >
    <thead>
        <tr>
            <th>Product (Parent Product)</th> 
            <th>Associated Sites</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @for (int i = 0; i < Model.Count(); i++)
        { 
        <tr>
            <td>
                <a href="Edit"><strong>@Model.ElementAt(i).Name</strong></a><br />
            </td>
            <td>
                <span class="lesser"></span>
            </td>
            <td>@Html.ActionLink("Edit Product", "Edit", "Products")<br />
                @Html.ActionLink("Associate Site", "Associate", "Products")
            </td>
         </tr>
        }
        <tr>
</tbody>
</table>

и CSS как этот 

    #products-table
{
     width: 200px;
    height: 400px;
    overflow:scroll;
}

но прокрутка не работает, я хочу зафиксировать высоту таблицы и, если она превышает, то работать с полосой прокрутки

51
Mohamed Naguib

Таблица с фиксированным заголовком

<table cellspacing="0" cellpadding="0" border="0" width="325">
<tr>
  <td>
   <table cellspacing="0" cellpadding="1" border="1" width="300" >
     <tr style="color:white;background-color:grey">
        <th>Header 1</th>
        <th>Header 2</th>
     </tr>
   </table>
  </td>
</tr>
<tr>
 <td>
   <div style="width:320px; height:60px; overflow:auto;">
     <table cellspacing="0" cellpadding="1" border="1" width="300" >
       <tr>
         <td>new item</td>
         <td>new item</td>
       </tr>
       <tr>
         <td>new item</td>
         <td>new item</td>
       </tr>
       <tr>
         <td>new item</td>
         <td>new item</td>
       </tr>
       <tr>
         <td>new item</td>
         <td>new item</td>
       </tr>   
     </table>  
   </div>
  </td>
 </tr>
</table>

Результат

Demo Image

Это работает во всех браузерах 

Демоверсия jsfiddle http://jsfiddle.net/nyCKE/6302/

60
Garry

Поздний ответ, другая идея, но очень короткая.

  1. положить стол в обертку div 
  2. поместите содержимое ячеек заголовка в div
  3. исправить заголовок content, см. CSS

HTML

<div id="scrolltable">
    <table>
        <tr><th><div>first col</div></th><th><div>second</div></th></tr>
        <tr><td>foo</td><td>bar</td></tr>
        ... many rows ...
    </table>
</div>

CSS

#scrolltable { margin-top: 20px; height: 200px; overflow: auto; }
#scrolltable th div { position: absolute; margin-top: -20px; }

проверить скрипку

13
Jan Turoň

Для тех, кто интересуется, как реализовать решение Гарри с более чем одним заголовком, вот оно:

#wrapper {
  width: 235px;
}

table {
  border: 1px solid black;
  width: 100%;
}

th,
td {
  width: 100px;
  border: 1px solid black;
}

thead>tr {
  position: relative;
  display: block;
}

tbody {
  display: block;
  height: 80px;
  overflow: auto;
}
<div id="wrapper">
  <table>
    <thead>
      <tr>
        <th>column1</th>
        <th>column2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>row1</td>
        <td>row1</td>
      </tr>
      <tr>
        <td>row2</td>
        <td>row2</td>
      </tr>
      <tr>
        <td>row3</td>
        <td>row3</td>
      </tr>
      <tr>
        <td>row4</td>
        <td>row4</td>
      </tr>
    </tbody>
  </table>
</div>

4
patrickdamery

Работает только в Chrome, но может быть адаптирован для других современных браузеров. Таблица возвращается к общей таблице с полосой прокрутки в других brws . Использует свойство CSS3 FLEX.

http://jsfiddle.net/4SUP8/1/

<table border="1px" class="flexy">
    <caption>Lista Sumnjivih vozila:</caption>
    <thead>
        <tr>
            <td>Opis Sumnje</td>
        <td>Registarski<br>broj vozila</td>
        <td>Datum<br>Vreme</td>
        <td>Brzina<br>(km/h)</td>
        <td>Lokacija</td>
        <td>Status</td>
        <td>Akcija</td>
        </tr>
    </thead>
    <tbody>

        <tr>
        <td>Osumnjičen tranzit</td>
        <td>NS182TP</td>
        <td>23-03-2014 20:48:08</td>
        <td>11.3</td>
        <td>Raskrsnica kod pumpe<br></td>
        <td></td>
        <td>Prikaz</td>
        </tr>
        <tr>

        <tr>
        <td>Osumnjičen tranzit</td>
        <td>NS182TP</td>
        <td>23-03-2014 20:48:08</td>
        <td>11.3</td>
        <td>Raskrsnica kod pumpe<br></td>
        <td></td>
        <td>Prikaz</td>
        </tr>
        <tr>

        <tr>
        <td>Osumnjičen tranzit</td>
        <td>NS182TP</td>
        <td>23-03-2014 20:48:08</td>
        <td>11.3</td>
        <td>Raskrsnica kod pumpe<br></td>
        <td></td>
        <td>Prikaz</td>
        </tr>
        <tr>


        <tr>
        <td>Osumnjičen tranzit</td>
        <td>NS182TP</td>
        <td>23-03-2014 20:48:08</td>
        <td>11.3</td>
        <td>Raskrsnica kod pumpe<br></td>
        <td></td>
        <td>Prikaz</td>
        </tr>

    </tbody>
</table>

Стиль (CSS 3):

caption {
    display: block;
    line-height: 3em;
    width: 100%;
    -webkit-align-items: stretch;
    border: 1px solid #eee;
}

       .flexy {
            display: block;
            width: 90%;
            border: 1px solid #eee;
            max-height: 320px;
            overflow: auto;
        }

        .flexy thead {
            display: -webkit-flex;
            -webkit-flex-flow: row;
        }

        .flexy thead tr {
            padding-right: 15px;
            display: -webkit-flex;
            width: 100%;
            -webkit-align-items: stretch;
        }

        .flexy tbody {
            display: -webkit-flex;
            height: 100px;
            overflow: auto;
            -webkit-flex-flow: row wrap;
        }
        .flexy tbody tr{
            display: -webkit-flex;
            width: 100%;
        }

        .flexy tr td {
            width: 15%;
        }
4
Gawran

Это работа для меня

Демо: jsfiddle

$(function() 
{
    Fixed_Header();
});

function Fixed_Header()
{
    $('.User_Table thead').css({'position': 'absolute'});
    $('.User_Table tbody tr:eq("2") td').each(function(index,e){
        $('.User_Table thead tr th:eq("'+index+'")').css({'width' : $(this).outerWidth() +"px" });
    });
    var Header_Height = $('.User_Table thead').outerHeight();
    $('.User_Table thead').css({'margin-top' : "-"+Header_Height+"px"});
    $('.User_Table').css({'margin-top' : Header_Height+"px"});
}
1
Mohamad Hamouday
<div style="overflow:auto">
    <table id="table2"></table>
</div>

Попробуйте этот код для таблицы переполненияIt будет работать только с тегом div 

0
Thinesh Thinesh

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

  • Таблица с фиксированным заголовком
  • Градиент прокрутки переполнения
  • Пользовательская полоса прокрутки

Смотрите живой пример ниже:

$("#scrolltable").html("<table id='cell'><tbody></tbody></table>");
$("#cell").append("<thead><tr><th><div>First col</div></th><th><div>Second col</div></th></tr></thead>");

for (var i = 0; i < 40; i++) {
  $("#scrolltable > table > tbody").append("<tr><td>" + "foo" + "</td><td>" + "bar" + "</td></tr>");
}
/* Table with fixed header */

table,
thead {
  width: 100%;
  text-align: left;
}

#scrolltable {
  margin-top: 50px;
  height: 120px;
  overflow: auto;
  width: 200px;
}

#scrolltable table {
  border-collapse: collapse;
}

#scrolltable tr:nth-child(even) {
  background: #EEE;
}

#scrolltable th div {
  position: absolute;
  margin-top: -30px;
}


/* Custom scrollbar */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}


/* Overflow scroll gradient */

.overflow-scroll-gradient {
  position: relative;
}

.overflow-scroll-gradient::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 240px;
  height: 25px;
  background: linear-gradient( rgba(255, 255, 255, 0.001), white);
  pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overflow-scroll-gradient">
  <div id="scrolltable">
  </div>
</div>

0
Yi-Ting Liu

Для чего бы это ни стоило сейчас: вот еще одно решение: 

  • создать два div в display: inline-block
  • в первом div поместите таблицу только с заголовком (таблица заголовков tabhead)
  • во 2-й div, поместите таблицу с заголовком и данными (таблица данных/полная таблица tabfull)
  • используйте JavaScript, используйте setTimeout(() => {/*...*/}) для выполнения кода после рендеринга/после заполнения таблицы результатами из fetch
  • измерить ширину каждого th в таблице данных (используя clientWidth
  • применить ту же ширину к аналогу в таблице заголовка
  • установите видимость заголовка таблицы данных скрытым и установите верхнее поле равным -1 * высота пикселей таблицы данных

С помощью нескольких настроек этот метод используется (для краткости/простоты я использовал d3js, те же операции можно выполнить с помощью простого DOM): 

setTimeout(() => { // pass one cycle
  d3.select('#tabfull')
    .style('margin-top', (-1 * d3.select('#tabscroll').select('thead').node().getBoundingClientRect().height) + 'px')
    .select('thead')
      .style('visibility', 'hidden');
  let widths=[]; // really rely on COMPUTED values
  d3.select('#tabfull').select('thead').selectAll('th')
    .each((n, i, nd) => widths.Push(nd[i].clientWidth));
  d3.select('#tabhead').select('thead').selectAll('th')
    .each((n, i, nd) => d3.select(nd[i])
          .style('padding-right', 0)
          .style('padding-left', 0)
          .style('width', widths[i]+'px'));
})

Ожидание в цикле рендеринга имеет преимущество, заключающееся в использовании движка макета браузера в течение всего процесса - для любого типа заголовка; он не связан с какими-то сходными длинами особых условий или содержимого ячеек. Он также корректно настраивается для видимых полос прокрутки (как в Windows)

Я поместил кодовую ручку с полным примером здесь: https://codepen.io/sebredhh/pen/QmJvKy

0
Sebastian Rothbucher