Deux tableaux l'un a cote de l'autre

**paladice** · 04/04/2013, 16h53

Bonjour,

j'ai déjà regardé sur d'autres topic mais j'ai beau essayer ça ne fonctionne pas je dois omettre quelque chose... donc peut-être que vous réussirez à m'aider

Je voudrais mettre deux tableaux l'un à côté de l'autre (quelle que soit la taille, je préfère qu'il y ai une scrollbar horizontale plutôt que le second tableau aille à la ligne)

J'ai donc :

Code :

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

1
2
3
4
5
6
7
8
9
<div id="blocTableaux">
    <table id="tabG">
        ...
    </table>
 
    <table id="tabD">
        ...
    </table>
</div>

et en css j'ai :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
#blocTableaux{
    clear :both;
}
 
#tabG{
    float : left;
    width : 50%;
}
 
#tabD{
    float : right;
    width : 50%;
}

et pourtant, ça ne fonctionne pas. Une idée svp ? Merci d'avance

**bob633** · 04/04/2013, 17h19

Quand tu mets tes valeurs en pourcentages, il faut compter la largeur des bordures et autres styles qui peuvent prendre de la place.

A ta place je mettrais 49% pour chacun pour tester, et ensuite même si le tableau de droit est à droite, tu dois lui appliquer la propriété

Code :

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

float:left;

Pourquoi ? Tout simplement parce que cette propriété lui dit d'aller à gauche de l'élément précédent et donc à côté de ton tabG

**paladice** · 04/04/2013, 17h23

Ok, merci pour ta réponse, avec 49% ça fonctionne =D . Un nouveau problème est apparu cependant. La largeur de mes tableaux est variables, et j'ai remarqué en ajoutant des caractères que si l'un des tableaux est trop grand, il va à la ligne. Alors que j'aimerais qu'ils restent sur la même ligne. Une idée ?

**bob633** · 04/04/2013, 17h34

Je suis pas expert HTML, mais tu devrais peut-être fixer la largeur au niveau des tes cellules <td>.

Après je n'aime pas trop bosser avec les % pour ces désagréments. Je préfère fixer mes valeurs en px, em ou autre, et avoir la même valeur sur tous les navigateurs.

**paladice** · 04/04/2013, 17h42

C'est vrai, il va falloir que je regarde ce qui m'arrange le plus

**rodolphebrd** · 04/04/2013, 17h46

bonjour,

il ya des propriétés qui ne servent à rien (clear:both) et vous pouvez utiliser table-cell si vous vous lancez sur une mise en page en tableau.
La largeur en % n'est absolument pas un problème et représente même un avantage en responsive.

Envoyé par paladice

La largeur de mes tableaux est variables, et j'ai remarqué en ajoutant des caractères que si l'un des tableaux est trop grand, il va à la ligne

ben non:

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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#tabG, #tabD{
float : left;
width : 50%;
}
</style>
</head>
<body>
<div id="blocTableaux">
<table id="tabG">
<tr> <td>une cellule fghfghfgggggLorem ipsum dolor sit amet, consectetur adipisicing elit, cupidatat non proident. Excepteur sint occaecat ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur. Velit esse cillum dolore sunt in culpa ut labore et dolore magna aliqua. Mollit anim id est laborum. Ut enim ad minim veniam, ullamco laboris nisi duis aute irure dolor. In reprehenderit in voluptate cupidatat non proident, consectetur adipisicing elit. Velit esse cillum dolore. Ut aliquip ex ea commodo consequat. Excepteur sint occaecat quis nostrud exercitation cupidatat non proident. Qui officia deserunt sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Ut labore et dolore magna aliqua. Mollit anim id est laborum. Duis aute irure dolor consectetur adipisicing elit, eu fugiat nulla pariatur. Ut enim ad minim veniam, qui officia deserunt ut labore et dolore magna aliqua. Cupidatat non proident, mollit anim id est laborum. Ut labore et dolore magna aliqua. Excepteur sint occaecat velit esse cillum dolore lorem ipsum dolor sit amet. Eu fugiat nulla pariatur. Ullamco laboris nisi in reprehenderit in voluptate sunt in culpa. Cupidatat non proident, ut enim ad minim veniam, ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt quis nostrud exercitation consectetur adipisicing elit. In reprehenderit in voluptate ut enim ad minim veniam, excepteur sint occaecat. Eu fugiat nulla pariatur. Ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, cupidatat non proident, ut aliquip ex ea commodo consequat. Qui officia deserunt ut enim ad minim veniam, sunt in culpa. Quis nostrud exercitation eu fugiat nulla pariatur. Cupidatat non proident, ut labore et dolore magna aliqua. Velit esse cillum dolore qui officia deserunt duis aute irure dolor. Eu fugiat nulla pariatur. Mollit anim id est laborum. Ut labore et dolore magna aliqua. Consectetur adipisicing elit, eu fugiat nulla pariatur. Duis aute irure dolor sunt in culpa velit esse cillum dolore. Qui officia deserunt ut aliquip ex ea commodo consequat. Excepteur sint occaecat quis nostrud exercitation ut enim ad minim veniam. Cupidatat non proident, eu fugiat nulla pariatur. Ut aliquip ex ea commodo consequat. Ut labore et dolore magna aliqua. Mollit anim id est laborum. Ullamco laboris nisi. Sed do eiusmod tempor incididunt in reprehenderit in voluptate ut enim ad minim veniam. Eu fugiat nulla pariatur. Duis aute irure dolor mollit anim id est laborum. Sunt in culpa lorem ipsum dolor sit amet, cupidatat non proident. Ut labore et dolore magna aliqua. Qui officia deserunt eu fugiat nulla pariatur. Sunt in culpa ut enim ad minim veniam, mollit anim id est laborum. Excepteur sint occaecat velit esse cillum dolore. In reprehenderit in voluptate duis aute irure dolor eu fugiat nulla pariatur. Ut enim ad minim veniam, velit esse cillum dolore sed do eiusmod tempor incididunt. Quis nostrud exercitation cupidatat non proident, lorem ipsum dolor sit amet. Ut aliquip ex ea commodo consequat. Duis aute irure dolor ut labore et dolore magna aliqua. Mollit anim id est laborum. Velit esse cillum dolore in reprehenderit in voluptate sed do eiusmod tempor incididunt. Eu fugiat nulla pariatur. Quis nostrud exercitation ut aliquip ex ea commodo consequat.g</td></tr>
</table>
<table id="tabD">
<tr> <td>roident, ut enim ad minim veniam, ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt quis nostrud exercitation consectetur adipisicing elit. In reprehenderit in voluptate ut enim ad minim veniam, excepteur sint occaecat. Eu fugiat nulla pariatur. Ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, cupidatat non proident, ut aliquip ex ea commodo consequat. Qui officia deserunt ut enim ad minim veniam, sunt in culpa. Quis nostrud exercitation eu fugiat nulla pariatur. Cupidatat non proident, ut labore et dolore magna aliqua. Velit esse cillum dolore qui officia deserunt duis aute irure dolor. Eu fugiat nulla pariatur. Mollit anim id est laborum. Ut labore et dolore magna aliqua. Consectetur adipisicing elit, eu fugiat nulla pariatur. Duis aute irure dolor sunt in culpa velit esse cillum dolore. Qui officia deserunt ut aliquip ex ea commodo consequat. Excepteur sint occaecat quis nostrud exercitation ut enim ad minim veniam. Cupidatat non proident, eu fugiat nulla pariatur. Ut aliquip ex ea commodo consequat. Ut labore et dolore magna aliqua. Mollit anim id est laborum. Ullamco laboris nisi. Sed do eiusmod tempor incididunt in reprehenderit in voluptate ut enim ad minim veniam. Eu fugiat nulla pariatur. Duis aute irure dolor mollit anim id est laborum. Sunt in culpa lorem ipsum dolor sit amet, cupidatat non proident. Ut labore et dolore magna aliqua. Qui officia deserunt eu fugiat nulla pariatur. Sunt in culpa ut enim ad minim veniam, mollit anim id est laborum. Excepteur sint occaecat velit esse cillum dolore. In reprehenderit in voluptate duis aute irure dolor eu fugiat nulla pariatur. Ut enim ad minim veniam, velit esse cillum dolore sed do eiusmod tempor incididunt. Quis nostrud exercitation cupidatat non proident, lorem ipsum dolor sit amet. Ut aliquip ex ea commodo consequat. Duis aute irure dolor ut labore et dolore magna aliqua. Mollit anim id est laborum. Velit esse cillum dolore in reprehenderit in voluptate sed do eiusmod tempor incididunt. Eu fugiat nulla pariatur. Quis nostrud exercitation ut aliquip ex ea commodo consequat.g</td></tr>
</table>
</div>
</body>
</html>

**paladice** · 04/04/2013, 18h01

Merci pour ta réponse et pour ta lecon de latin lol

Je vais retirer le "clear : both", je ne vois pas à quoi ça sers mais sur un autre sujet quelqu'un disait que c'était important

Je vais regarder ça de plus près

merci encore

**thelvin** · 04/04/2013, 18h06

De fait, je vois deux solution. Sur chacune des deux, on enlève les float et on remplace par autre chose :

- Présentation en tableau, avec display: table-cell comme dit au-dessus, ou bien en encadrant chaque table d'un <div> qui prendra le display: table-cell à la place.

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
<style>
  .table-wrapper {display: table-cell}
</style>
<div class="tables">
  <div class="table-wrapper">
     <table>
       ...
     </table>
  </div>
 
  <div class="table-wrapper">
     <table>
       ...
     </table>
  </div>
</div>

- Jouer avec white-space : pre. Mettre display: inline-table sur les tables pour qu'elles soient censées se mettre l'une à côté de l'autre, et mettre white-space: pre sur leur conteneur pour qu'elles n'aient pas le droit d'aller à la ligne à moins que le code lui-même n'aille à la ligne (et donc, ne pas mettre de saut de ligne entre les deux tables dans le code.)

Code :

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

1
2
3
4
5
6
7
8
9
<style>
  .tables table {display: inline-table}
  .tables {white-space: pre}
</style>
<div class="tables"><table>
       ...
     </table> <table>
       ...
     </table></div>

**paladice** · 05/04/2013, 09h08

Merci bien

pour l'instant ça fonctionne donc je vais laisser comme ça pour éviter de faire une bêtise lol mais si jamais je commence à voir des bug d'affichage, je testerais tes solutions

Merci encore

Deux tableaux l'un a cote de l'autre

HTML

Vue hybride

Discussions similaires

Partager

Partager