web-dev-qa-db-fra.com

Défilement de tableau avec HTML et CSS

J'ai un tableau comme celui que je remplis avec une donnée 

<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>

et CSS comme ça 

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

mais le défilement ne fonctionne pas, je veux corriger la hauteur de la table et si elle dépasse, alors travailler avec la barre de défilement

htmlcsscss3html-table
51
Mohamed Naguib

Table avec en-tête fixe

<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>

Résultat

Demo Image

Cela fonctionne dans tous les navigateurs 

Démo jsfiddle http://jsfiddle.net/nyCKE/6302/

60
Garry

Réponse tardive, une autre idée, mais très courte.

  1. mettre la table dans diviseur 
  2. mettre le contenu des cellules d'en-tête dans div
  3. corrige l'en-tête contents, voir 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; }

testez le violon

13
Jan Turoň

Pour ceux qui se demandent comment implémenter la solution de Garry avec plusieurs en-têtes, voici la solution

#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

Fonctionne uniquement dans Chrome, mais il peut être adapté à d'autres navigateurs modernes. La table revient à la table commune avec la barre de défilement dans les autres brws . Utilise la propriété 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>

Style (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

Ce travail pour moi

Démo: 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>

Essayez ce code pour débordement de table. 

0
Thinesh Thinesh

Ajoute un dégradé de fondu à un élément de tableau HTML en débordement pour mieux indiquer qu'il y a plus de contenu à faire défiler.

  • Table avec en-tête fixe
  • Dépassement du dégradé de défilement
  • Barre de défilement personnalisée

Voir l'exemple live ci-dessous:

$("#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

Quoi qu'il en soit, voici une autre solution: 

  • créer deux divs dans un display: inline-block
  • dans la première division, mettez une table avec seulement l'en-tête (table d'en-tête tabhead)
  • dans la 2ème division, mettez une table avec en-tête et données (table de données/table complète tabfull)
  • utilisez JavaScript, utilisez setTimeout(() => {/*...*/}) pour exécuter le code après le rendu/après avoir rempli la table avec les résultats de fetch
  • mesurer la largeur de chaque th dans la table de données (en utilisant clientWidth) 
  • appliquer la même largeur à la contrepartie dans la table d'en-tête
  • définir la visibilité de l'en-tête de la table de données sur masqué et définir le haut de la marge sur -1 * hauteur du pixel de la table de données

Avec quelques ajustements, voici la méthode à utiliser (par souci de simplicité, j’ai utilisé d3js, les mêmes opérations peuvent être effectuées à l’aide de plain 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'));
})

L'attente en cycle de rendu présente l'avantage d'utiliser le moteur de présentation du navigateur tout au long du processus - pour tout type d'en-tête; il n'est pas lié à des conditions spéciales ou à des longueurs de contenu de cellules similaires. Il s'ajuste également correctement pour les barres de défilement visibles (comme sous Windows)

J'ai mis en place un code avec un exemple complet ici: https://codepen.io/sebredhh/pen/QmJvKy

0
Sebastian Rothbucher