[CSS]Table scrollable version CSS

NoSmoking15 Juil. 2016

Table scrollable verticalement (à partir de IE 10)

Structure HTML de base

<table class="table-scroll">
  <thead>
    <tr>
      <td></td> <td></td> <td></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td> <td></td> <td></td>
    </tr>
    <!-- la suite des données de la table -->
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5"></td>
    </tr>
  </tfoot>
</table>

Le rendu

Prénom	Nom	Date	Entreprise	Fonction
Patricia	Ray	05/01/1981	Gevee	Mechanical Systems Engineer
James	Thomas	01/30/1978	Skynoodle	Nurse Practicioner
Gerald	Hawkins	01/22/1981	Voonix	Nurse Practicioner
Gary	Hamilton	08/19/1981	Zoombox	Administrative Officer
Sarah	Fernandez	04/13/1974	Pixoboo	Payment Adjustment Coordinator
Brenda	Carpenter	07/01/1978	Avaveo	Staff Accountant II
Joan	Alvarez	06/25/1966	Zazio	Associate Professor
Wanda	Hanson	11/04/1984	Brightdog	Compensation Analyst
Martin	Taylor	02/17/1969	Youspan	Engineer III
Beverly	Stanley	11/25/1970	Dabtype	Assistant Media Planner
Christoph	Casbourne	9/13/1957	Tejon Ranch Co	Services
Truda	Bertelmot	11/11/1985	Clipper Realty Inc.	Accounting
Dallon	Goulding	3/16/1977	Goldman Sachs Group, Inc. (The)	Research and Development
Yoshiko	Danielsky	7/10/1997	FB Financial Corporation	Business Development
Berte	Dmitrienko	11/17/1995	Argan, Inc.	Marketing
Valentijn	Meadmore	8/2/1993	MGM Resorts International	Human Resources
Suzy	Flewett	10/25/1980	Ceragon Networks Ltd.	Research and Development
Mordecai	Jerrams	10/13/1965	Silicom Ltd	Training
Claus	Samwyse	11/25/1974	Verizon Communications Inc.	Accounting
Rafaelia	Pedrol	4/18/1975	Schneider National, Inc.	Research and Development
Lita	Lisimore	6/8/1988	Simmons First National Corporation	Product Management
Noak	McPeice	12/6/1974	Eyegate Pharmaceuticals, Inc.	Product Management
Craggy	Portugal	12/18/1989	Roper Technologies, Inc.	Sales
Madelle	Bartoszinski	12/20/1958	Honeywell International Inc.	Legal
Frasquito	Harriagn	9/24/1998	ASB Bancorp, Inc.	Accounting
Betteann	Freegard	5/5/1954	Brookfield Property Partners L.P.	Marketing
Jacinda	Sheepy	10/22/1989	Landmark Infrastructure Partners LP	Engineering
Sigismund	Arnholtz	9/16/1965	Ellington Residential Mortgage REIT	Research and Development
Myrle	Cromack	5/7/1951	First Cash, Inc.	Research and Development
Zorina	Momford	11/1/1961	Cimpress N.V	Marketing
Ceci n'est qu'un <tfoot>.

Le CSS pour le scroll

Il est important de fixer une min-width et une max-width aux <td> pour inhiber leur comportement naturel au dimensionnement.

/*========================*/
/* pour l'effet de scroll */
/*========================*/
.table-scroll thead > tr,
.table-scroll tfoot > tr,
.table-scroll tbody {
  display: block;
}
.table-scroll tbody {
  height: 11.5em;
  overflow: auto;
  overflow-x: hidden;
}
/* définitions des largeurs */
.table-scroll td:nth-child(1) ,
.table-scroll td:nth-child(2) ,
.table-scroll td:nth-child(4) {
  max-width: 6em;
  min-width: 6em;
}
.table-scroll td:nth-child(3) {
  max-width: 8em;
  min-width: 8em;
}
.table-scroll td:nth-child(5) {
  width: 20em;
}
.table-scroll td:last-child {
  padding-right: 1.5em;       /* de la place pour la scrollBar */
  border-right: 0;
}

Le CSS cosmétique

Le CSS suivant est juste là pour « styler » la <table>.

.table-scroll {
  border: 1px solid #888;
  border-collapse: separate;
  border-spacing: 0;
  empty-cells: hide;
  font: .8em Verdana,sans-serif;
  background-color: #EFEFEF;
}
.table-scroll td {
  padding: .5em;
  border-right: 1px solid #888;
  white-space: nowrap;
  word-break: normal;
}
.table-scroll td +td {
  border-left: 1px solid #FFF;
}
/* fond pour la ligne d'entête */
.table-scroll thead tr {
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2) )repeat scroll 0% 0% #EEE;
}
.table-scroll thead td {
  border-top: 1px solid #FFF;
  text-shadow: 1px 1px 0 #FFF;
}
.table-scroll tbody {
  border: 1px solid #888;
  border-width: 1px 0;
  background-color: #FFF;     /* annule couleur de fond de la TABLE */
}
.table-scroll tbody td {
  border-top: 1px solid #CCC;
}
/* couleur sur le :hover */
.table-scroll tbody tr:hover,
.table-scroll tbody td:hover {
  background-color: #EFEFFF;
  cursor: pointer;
}