Responsivité d'un tableau

**samybelarbi** · 07/05/2014, 15h39

Bonjour à tous
j'aimerais adapter mon tableau pour chaque résolution d'un ecran pour cela j'ai pensé a plusieurs trucs mais sans succès , voici ma dernière proposition

mon tableau en full résolution
Nom : 1.png
Affichages : 92
Taille : 48,9 Ko

Nom : 1.png
Affichages : 92
Taille : 48,9 Ko

ce que j'ai réussi a faire mais c'est très moche lol

Nom : 2.png
Affichages : 193
Taille : 7,9 Ko

des solutions a me proposé ?

**Muchos** · 07/05/2014, 17h38

Votre solution actuelle est intéressante : je serais curieux de voir le code. On peut peut-être l'améliorer.

**samybelarbi** · 07/05/2014, 17h51

avec plaisir =) voici le code
le tableau :

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
 
<table class="tableau">
		<thead>
		<tr>
	<th scope="col">Num </th>
    <th scope="col">Conducteur</th> 
    <th scope="col">Parution</th>
   <?php  for ($h=1; $h<=24; $h++) {
                                $nbex = isset($heures[$h]) ? $heures[$h] :'';
 
                                echo '<th>' . $h. 'H</th>';
                        }
     echo '</tr>';
?>
 
		</thead>
		<tbody>
		<?php foreach ($tableau as $num=> $conducteurs){
            foreach ($conducteurs as $conducteur=>$parutions){  
                 foreach ($parutions as $parution=>$heures){
                                         
                                          echo '<tr><td>' . $num . '</td>';
                echo '<td>' . $conducteur. '</td>';
                      echo '<td>' .$parution ; '</td>';
                      for ($h=1; $h<=24; $h++) {
                                $nbex = isset($heures[$h]) ? $heures[$h] : '';
                                echo '<td>' . $nbex. '</td>';
               }
             }
           }
     echo '</tr>';
}
?>
		</tbody>
	</table>

le CSS le redimensionnement est dans la même page

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
 
<style>
 
	@media 
	only screen and (max-width: 480px),
	(min-device-width: 768px) and (max-device-width: 1024px)  {
 
		/* Force la table */
		table, thead, tbody, th, td, tr { 
			display: block; 
		}
 
 
		thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
 
		tr { border: 1px solid #ccc; }
 
		td { 
 
			border: none;
			border-bottom: 1px solid #eee; 
			position: relative;
			padding-left: 50%; 
		}
 
		td:before { 
 
			position: absolute;
		/
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
		}
 
		/*
		Label the data
		*/
		td:nth-of-type(1):before { content: "Num Machine :"; }
		td:nth-of-type(2):before { content: "Conducteur : "; }
		td:nth-of-type(3):before { content: "Parution : "; }
 
 
	}
 
	/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		body { 
			padding: 0; 
			margin: 0; 
			width: 320px; }
		}
 
	/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body { 
			width: 495px; 
		}
	}
 
	</style>

**Egaro555** · 07/05/2014, 17h55

Et zut!
trop tard!

voila un autre code!

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
 
#mon_tableau th {
    background: #000000;
    color: #ffffff;
}
#mon_tableau {
    text-align: center;
    position: relative;
    margin-top: 100px;
}
#mon_tableau table {
    background: #dddddd;
    width:100%
}
#mon_tableau td {
    background: #ffffff;
}
#parti_gauche {
    width: 300px;
    position: absolute;
}
#parti_droite table{
    width: 1200px;
}
#parti_droite th{
    width: 50px;
}
#parti_droite {
    overflow: auto;
    left: 300px;
    right: 0px;
    position: absolute;
}

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
48
49
<div id="mon_tableau">
 
		<div id="parti_gauche">
			<table>
				<tr>
					<th>Num</th>
					<th>Conducteur</th>
					<th>Parution</th>
				</tr>
 
				<tr><td>01</td><td>TANSINI</dt><td>La vie du rail 366</dt></tr>
				<tr><td>01</td><td>TANSINI</dt><td>La vie du rail 366</dt></tr>
				<tr><td>01</td><td>TANSINI</dt><td>La vie du rail 366</dt></tr>
				<tr><td>01</td><td>TANSINI</dt><td>La vie du rail 366</dt></tr>
				<tr><td>01</td><td>TANSINI</dt><td>La vie du rail 366</dt></tr>
				<tr><td>01</td><td>TANSINI</dt><td>La vie du rail 366</dt></tr>
				<tr><td>01</td><td>TANSINI</dt><td>La vie du rail 366</dt></tr>
				<tr><td>01</td><td>TANSINI</dt><td>La vie du rail 366</dt></tr>
				<tr><td>01</td><td>TANSINI</dt><td>La vie du rail 366</dt></tr>
				<tr><td>01</td><td>TANSINI</dt><td>La vie du rail 366</dt></tr>
				<tr><td>01</td><td>TANSINI</dt><td>La vie du rail 366</dt></tr>
				<tr><td>01</td><td>TANSINI</dt><td>La vie du rail 366</dt></tr>
				<tr><td>01</td><td>TANSINI</dt><td>La vie du rail 366</dt></tr>
				<tr><td>01</td><td>TANSINI</dt><td>La vie du rail 366</dt></tr>
				<tr><td>01</td><td>TANSINI</dt><td>La vie du rail 366</dt></tr>			</table>
		</div>
		<div id="parti_droite">
			<table>
				<tr>
					<th>01h</th><th>02h</th><th>03h</th><th>04h</th><th>05h</th><th>06h</th><th>07h</th><th>08h</th><th>09h</th><th>10h</th><th>11h</th><th>12h</th><th>13h</th><th>14h</th><th>15h</th><th>16h</th><th>17h</th><th>18h</th><th>19h</th><th>20h</th><th>21h</th><th>22h</th><th>23h</th><th>00h</th>
				</tr>
 
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>4734</td><td>2780</td><td>373</td><td></td><td></td></tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>4734</td><td>2780</td><td>373</td><td></td><td></td></tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>4734</td><td>2780</td><td>373</td><td></td><td></td></tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>4734</td><td>2780</td><td>373</td><td></td><td></td></tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>4734</td><td>2780</td><td>373</td><td></td><td></td></tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>4734</td><td>2780</td><td>373</td><td></td><td></td></tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>4734</td><td>2780</td><td>373</td><td></td><td></td></tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>4734</td><td>2780</td><td>373</td><td></td><td></td></tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>4734</td><td>2780</td><td>373</td><td></td><td></td></tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>4734</td><td>2780</td><td>373</td><td></td><td></td></tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>4734</td><td>2780</td><td>373</td><td></td><td></td></tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>4734</td><td>2780</td><td>373</td><td></td><td></td></tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>4734</td><td>2780</td><td>373</td><td></td><td></td></tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>4734</td><td>2780</td><td>373</td><td></td><td></td></tr>
				<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>4734</td><td>2780</td><td>373</td><td></td><td></td></tr>			</table>
		</div>
	</div>

**rodolphebrd** · 07/05/2014, 19h28

Bonjour,

je conseille the post de SylvainPV : http://www.developpez.net/forums/d14...ux-responsive/

Responsivité d'un tableau

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager