Discussion :

[Beginner.]

Salut,

J'aimerais savoir si il est possible en CSS d'avoir un scroll-y pour deux colonnes et un scroll-x seulement pour la deuxième colonne...

Je ne crois pas que ce soit clair donc j'explique à partir de ça : http://jsbin.com/hawanocohu/edit?css,output

1 - On voit qu'il y a un scroll-y qui agit sur la deuxième colonne mais j'aimerais que ce scroll agissent aussi sur la première colonne (celle des numéros de ligne).

2- On voit qu'il y a un scroll-x qui agit seulement sur la deuxième colonne, ça c'est bon, c'est ce que je veux mais est-ce possible de placer cette bar scroll-x sous les deux colonnes ?

Ce deuxième point, ce serait un plus mais il n'est pas prioritaire...

Merci.

[Invité]

Bonjour,

1/ une solution trouvée dans cette discussion : https://codepen.io/jreaux62/pen/ybRPqa

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<div id="general">
  <div id="titre">
    <table>
      <tr>
        <td>Titre</td>
      </tr>
    </table>
  </div>
  <div id="entete">
    <table>
      <tr>
        <td>Alpha</td>
        <td>Beta</td>
        <td>Gamma</td>
        <td>Omega</td>
        <td>Upsilon</td>
      </tr>
    </table>
  </div>
 
  <div id="first_col">
    <table>
      <tr>
        <td>Ligne 1</td>
      </tr>
      <tr>
        <td>Ligne 2</td>
      </tr>
 
      <tr>
        <td>Ligne 3</td>
      </tr>
      <tr>
        <td>Ligne 4</td>
      </tr>
    </table>
  </div>
 
  <div id="the_table" onscroll="doOnScroll(this);">
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
    </table>
  </div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
#general {
  position: absolute;
  overflow: hidden;
  width: 400px;
  height: 200px;
  border: 1px solid;
}
 
#titre {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 50px;
  background-color: #9CC;
  z-index: 100;
  width: 100px;
}
 
#entete {
  position: absolute;
  left: 100px;
  top: 0px;
  height: 50px;
  background-color: #9CC;
  z-index: 10;
}
 
#first_col {
  position: absolute;
  top: 50px;
  left: 0px;
  width: 100px;
  background-color: #CCF;
}
 
#the_table {
  position: absolute;
  overflow: scroll;
  left: 100px;
  top: 50px;
  width: 300px;
  height: 150px;
  background-color: #99C;
  z-index: 10;
}
 
td {
  width: 100px;
  border: 1px solid #000;
}
 
#titre table,
#entete table,
#first_col table,
#the_table table {
  border: 1px solid #000;
  padding: 1px;
}
 
#titre table {
  width: 100px;
  height: 50px;
}
 
#entete table {
  width: 500px;
  height: 50px;
}
 
#first_col table {
  width: 100px;
  height: 200px;
}
 
#the_table table {
  width: 500px;
  height: 200px;
}
 
#the_table table tr {
  height: 50px;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function doOnScroll(mondiv) {
  document.getElementById("first_col").style.top = 50 - mondiv.scrollTop + "px";
  document.getElementById("entete").style.left = 100 - mondiv.scrollLeft + "px";
}

Cela dit, je ne suis pas convaincu de l'aspect ergonomique ou esthétique du truc...

2/ Avec Boostrap, il existe une classe pour table responsive :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<table class="table table-responsive">
  ...
</table>

Ca ne répond pas à ta problématique, mais c'est bien plus ergonomique et très facile à mettre en oeuvre.

3/ Sinon : "tableau colonne fixe"

[Beginner.]

Merci. Ah je vois que tu es passé par un peu de JS, c'est aussi ce que j'ai fait finalement car le CSS ça m’agace parfois (tu résous un problème par ci et tu te retrouves avec un problème par là...). Par contre je vois que tu as utilisé .style.top et .scrollTop, je n'y avais pas pensé, j'ai utilisé le .scrollTop des deux colonnes et à chaque changement je fais : numLine.scrollTop = src.scrollTop;. Ça marche même quand la scrollbar de la première colonne n'est pas visible...

Du coup j'aurais peut-être dû poster dans la section JS ?

Sinon oui en ce moment je croise ce fameux Bootstrap mais j'y connais pas grand chose et ça me fait l'effet d'une boite noire (je ne sais pas comment il fait ce qu'il fait). Et je découvre des truc en CSS comme Flexbox, grid layout... qui semblent assez balaises...

D'ailleurs je crois bien que je refaire la page avec un de ces trucs...