Discussion :

[flodereims]

Bonjour,

Je possède deux tableaux (voir peut être 3 ensuite), mais je ne trouve pas la solution pour qu'il s'adapte au contenu, en fait comme vous pouvez le voir, sur le tableau 1, il y a plein de prénoms, et du coup la scroll barre s'active, le soucis c'est que dans le tableau 2, il y a qu'une seule entrée, mais je voudrais que dans celui ci, étant donné qu'il n'a pas la hauteur pour que la barre s'active, et bien le tableau soit à hauteur du premier prénom, sans le gros vide blanc en dessous.... je suis clair ? ^^

Est ce possible à faire ?

Cordialement.

Photos du rendu: https://ibb.co/n0nVF3c

Code HTML :

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
<div class="limite">
  <table>
    <thead>
      <tr>
        <th>Nom</th>
      </tr>
    </thead>
  </table>
  <div class="tbl-content">
    <table>
      <tbody>
        <tr><td>Jean</td></tr>
        <tr><td>Jean</td></tr>
        <tr><td>Jean</td></tr>
        <tr><td>Jean</td></tr>
        <tr><td>Jean</td></tr>
        <tr><td>Jean</td></tr>
        <tr><td>Jean</td></tr>
        <tr><td>Jean</td></tr>
        <tr><td>Jean</td></tr>
        <tr><td>Jean</td></tr>
        <tr><td>Jean</td></tr>
        <tr><td>Jean</td></tr>
        <tr><td>Jean</td></tr>
      </tbody>
    </table>
  </div>
</div>
 
<div class="limite">
  <table>
    <thead>
      <tr>
        <th>Nom</th>
      </tr>
    </thead>
  </table>
  <div class="tbl-content">
    <table>
      <tbody>
        <tr>
          <td>Marc</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS:

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
.limite {
  background: #e53935;
  margin: 0 0 120px 0;
  border: 1px solid lightgrey;
}
 
table {
    width: 100%;
}
 
tbody {
 
}
 
.tbl-content {
    background: #FFF;
    height: 300px;
    overflow: auto;
    overflow-x: hidden;
}
 
tr {
    display: flex;
    flex-direction: row;
    text-align: left;
}
 
th { /* HEADER TABLE */
    background: #e53935;
    color: #FFF;
    font-weight: 400;
    width: 100%;
    padding: 12px;
}
 
td { /* BODY TABLE */
    width: 100%;
    padding: 20px 12px;
}
 
*::-webkit-scrollbar {
    width: 8px;
    background: lightgrey;
}
 
*::-webkit-scrollbar-track {
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.3);
}
 
*::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

[Invité]

Bonjour,

Code css :

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

1
2
3
4
5
6
.tbl-content {
    background: #FFF;
    max-height: 300px; /* max-height au lieu de height */
    overflow: auto;
    overflow-x: hidden;
}