28172 sujets

CSS et mise en forme, CSS3

Scroll d'un tableau en laissant les titres de colonne fixes

Bonjour,

J'ai une page web qui contient un titre suivi d'un grand tableau.
Je souhaiterais garder visible les titres des colonnes de mon tableau lorsque je scrolle ma page vers le bas. Y-a-t-il une solution en css (ou html) ?

Le code de ma page ressemble pour le moment à quelque chose du genre :

<body>
<h1 class="titreH1">Mon titre</h1>
<div class="GP">
<table class="tableGP">
<tr class="titreCol"><th>Reference</th><th>Title</th><th>Ratio</th><th>File</th><th>Rule</th><th>P1</th><th>P2</th><th>P3</th><th>P4</th><th>P5</th><th>P6</th><th>P7</th><th>P8</th></tr>
<tr class="rang1"><td class="Ref">1 0 0 0</td><td class="Titre">DESIGN</td><td class="Ratio"></td><td class="GP"><a href="#fileList"> </a></td><td class="Rule"></td><td class="Phase"></td><td class="Phase"></td><td class="Phase"></td><td class="Phase"></td><td class="Phase"></td><td class="Phase"></td><td class="Phase"></td><td class="Phase"></td></tr>


Ethmael
Une approche de ce type pourrait être un début de solution mais visiblement cela ne fonctionne que sous FF 3 (échoue avec ie7, opera 9.6, chrome et safari).


<table border="1" summary="résumé">
<caption>
    légende
  </caption>
  <thead>
  <tr>
    <th scope="col">a</th>
    <th scope="col">b</th>
    <th scope="col">c</th>
  </tr>
  </thead>
  <tbody style="overflow:scroll;height:100px;">
  <tr>
    <td >qsdqsd</td>
    <td >qsdqsd</td>
    <td >qsdqsdqsdqsd qdsf sdfsdf </td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>

  <tr>
    <td> </td>
    <td> </td>
    <td>ghj</td>
  </tr>
  <tr>
    <td>qs</td>
    <td> </td>
    <td> </td>
  </tr>
  </tbody>
</table>
Sujet clos
Aller à