Tableau côte à côte scrollable

Bonjour à tous et toutes. j'ai le code css suivant :
Code:

1 2 float : left; margin-left : 5px;
pour des tableaux de class <table></table>
Si j'en met plus de trois sur mon écran, il y en a un qui part en bas.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 echo "<table class=\"tableau\">"; echo "<caption>Jour ".$jour."</caption>"; echo "<tr>"; if($jour==1)echo"<th class=\"tableau\">Phase de travail</th>"; for($i=0;$i<count($this->tab);$i++){ echo "<td class=\"tableau\"><input type ='text' $name=titreTab[".$jour."][".$i."] value='".$this->tab[$i]->titre."'/></td>"; } echo "</tr>"; if($jour==1){echo "<th class=\"tableau\">Moyens matériels</th>";} for($i=0;$i<count($this->tab);$i++){ echo "<td class=\"tableau\"><textarea rows='5' cols='25' name='descr[".$jour."][".$j."]' id='descr'></textarea></td>"; } echo "</table>";
ce qui donne ceci en php.

Y'aurait t il une astuce pour que les tableaux soient scrollables (que je puisse bouger la barre du bas) de manière à ce qu'ils ne soient plus les uns en dessous des autres ? J'espere qu'un grand manitou du web va exaucer mon voeu !(je rêve un peu trop) :)
merci d'avance.

Si le 3eme tableau passe en bas c'est que la largeur des trois est supérieure au conteneur. Réduit un peu leur largeur. Apres pour scroller tu peux les mettre chacun dans un div avec une largeur et une hauteur fixe, puis avec l'attribut overflow:auto;

Si tu vois l'idée :)
Bon courage

Bonjour,

Il y a la possibilité d'utiliser la propriété table-cell en contrôlant les largeurs des tableaux et des cellules : codepen

pour un ensemble scrollable: codepen

Les liens codepen ne fonctionnent pas, cordialement Vremi

Le problème c'est que je ne peux pas mettre de taille fixe, puisque les tableaux n'ont pas une taille fixe ...

Les liens sont bien actifs pourtant :koi:

Code:

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
83
<section>
<table border="2" cellspacing="2" cellpadding="2">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<table border="2" cellspacing="2" cellpadding="2">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<table border="2" cellspacing="2" cellpadding="2">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</section>

Code:

1
2
3
4
5
6
7
8
9
10
11
section{
	border: solid 3px salmon;
	overflow:scroll;
}
table {
	 min-width:300px;
	display: table-cell;
}
td{
	width:92px;
}

Solution alternative sans largeur de tableau:

Code:

1
2
3
4
5
6
7
8
9
10
section{
	border: solid 3px salmon;
	overflow:scroll;
}
table {
	display: table-cell;
}
td{
	min-width:92px;
}

Bonjour,
le code marche-t-il de votre coté ?

Voici ce que ça donne avec du lorem :

Code:

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
				<link rel="stylesheet" href="style2.css" >
        <title>Premiers tests du CSS</title>
    </head>
<body>
<section>
<table border="2" cellspacing="2" cellpadding="2">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<table border="2" cellspacing="2" cellpadding="2">
  <tr>
    <td><p>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam.</p> 
 
</td>
    <td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam. 
 
</td>
    <td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam. 
 
</td>
  </tr>
  <tr>
    <td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam. 
 
</td>
    <td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam. 
 
</td>
    <td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam. 
 
</td>
  </tr>
  <tr>
    <td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam. 
 
</td>
    <td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam. 
 
</td>
    <td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam. 
 
</td>
  </tr>
  <tr>
    <td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam. 
 
</td>
    <td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam. 
 
</td>
    <td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam. 
 
</td>
  </tr>
  <tr>
    <td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam. 
 
</td>
    <td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam. 
 
</td>
    <td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam. 
 
</td>
  </tr>
</table>
<table border="2" cellspacing="2" cellpadding="2">
  <tr>
    <td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam. 
 
</td>
    <td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam. 
 
</td>
    <td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam. 
 
</td>
  </tr>
  <tr>
    <td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam. 
 
</td>
    <td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam. 
 
</td>
    <td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam. 
 
</td>
  </tr>
  <tr>
    <td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam. 
 
</td>
    <td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam. 
 
</td>
    <td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta dignissim magna, ac lobortis nisl commodo congue. Maecenas aliquet, enim ac bibendum mattis, velit sem iaculis purus, a fringilla augue leo vitae nibh. Praesent vulputate nisl eget est elementum blandit. Fusce in tempor nulla. Nam laoreet euismod vehicula. Fusce ut neque arcu, in viverra urna. Vivamus non tempor diam. 
 
</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</section> 
</body>

Voici le résultat sous ie :

Il manque le résultat sous IE....

http://img6.imageshack.us/img6/8243/sanstitreoon.jpg

Si vous n'incluez pas le code Css, c'est normal comme rendu, non?

Code:

1
2
3
4
5
<head>
        <meta charset="utf-8" />
	<link rel="stylesheet" href="style2.css" >
        <title>Premiers tests du CSS</title>
</head>

Le code css est bien présent

Le code fonctionne très bien même en remplissant les cellules:http://codepen.io/rodolpheb/pen/bICrl

Codepen fonctionne normalement sur tous les navigateurs, testez sur un autre peut-être...

Sur quelle version de IE êtes vous?

j'ai testé sous firefox et codepen fonctionne niquel.
J'ai testé votre exemple qui fonctionne à merveille sous le dernier firefox, mais je dois assurer une compatibilité avec un windows xp qui tourne sous internet explorer 8...

Et je ne code donc pas en html5 ce qui complique un peu la tache ...

Ça n'a rien à voir avec html5, il vous suffit de remplacer section par un DIV. La propriété table-cell est reconnue depuis IE8.

j'ai essayé avec un div class ="section" et remplacer section par .section dans le css, ça ne marche toujours pas...

Dane le code html que vous postez, il y a une erreur sur votre avant dernier tableau (problème de fermeture de balise).

Pouvez vous me donner le numéro de la ligne svp ? Ou m'envoyer le code rectifié ? je ne trouve pas l'erreur