Discussion :

[djoufouf]

bonjour,

voici depuis quelque jours je suis bloqué sur comment centrer mon tableau dans la div parent

ce que je voudrais c est cela



mais je ne sais pas comment faire j ai essayer avec de balise center etc ... rien a faire il ne veut pas se centrer corectement

voici mon code html , CSS et PHP

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
83
84
85
86
87
88
89
90
91
92
93
94
95
	<div id="container2">	
<div class="scrollable-table">
	<table class="table-header-rotated">
    <thead>
      <tr>
        <!-- First column header is not rotated -->
        <th></th>
        <!-- juste pour afficher les organes en "th" -->
          <?php
 
 
				$tmp2=$_GET['id'];
				$conn;
				$T=1179;
				$table= array();
				$cpt=0;
				$i=0;
				$j=0;
 
				$stid5 = oci_parse($conn, 'SELECT BODY_NAME_EN, BODY_ACRONYM, BODY_ID FROM BODY WHERE BODY_ID in (select role_body_id_fk from role where role_member_id_fk in (select member_id from member where MEMBER_NATION_COUNTRY_ID_FK='.$tmp2.')) order by body_name_en');
				oci_execute($stid5);
 
 
			$countBody = oci_fetch_all($stid5, $res, 0, -1, OCI_FETCHSTATEMENT_BY_ROW);
			$j=0;
			while ($j < $countBody){
				echo"<th class=rotate-45><div><span>";
				echo $res[$j]['BODY_NAME_EN'];
				echo"</span></div></th>";
				$j++;
			}
 
 
			?>	
 
 
      </tr>
    </thead>
 
 
	<!-- Lignes par députés -->
    <tbody>
 
 
 
 
	  <?php
 
				$T=1179;
				$i=0;
				$j=0;
 
				$stid2 = oci_parse($conn, 'SELECT MEMBER_LASTNAME, MEMBER_FIRSTNAME, MEMBER_ID FROM MEMBER WHERE MEMBER_NATION_COUNTRY_ID_FK='.$tmp2.' ORDER BY MEMBER_LASTNAME');
				oci_execute($stid2);
				while (($row = oci_fetch_array($stid2, OCI_BOTH)) != false) {
				////je prend le nom prenom et id
					$TmpNom=$row['MEMBER_LASTNAME'];
					$TmpPrenom=$row['MEMBER_FIRSTNAME'];
					 $memberId=$row['MEMBER_ID'];
 
					 echo"<tr><th class=row-header>";
					 echo $TmpNom,' ',$TmpPrenom ;
					 echo "</th>";
 
					$i=0;
					while ($i < $countBody){
 
						$stRole = oci_parse($conn, 'SELECT function_legend from role, function WHERE role_function_id_fk=function_id and role_member_id_fk ='.$memberId. ' and role_body_id_fk='.$res[$i]['BODY_ID']);
						oci_execute($stRole);
 
						$countRole = oci_fetch_all($stRole, $resRole, 0, -1, OCI_FETCHSTATEMENT_BY_ROW);
 
						if($countRole>0){
							//echo $row[0] . " " . $row[1] . "<br>\n";
							echo '<td id="123">'.$resRole[0]['FUNCTION_LEGEND'].'</td>';
						}else{
							echo '<td></td>';
						}
 
						$i++;
					}
 
 
 
 
				echo '</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
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
.scrollable-table {
 
text-align:center;}
 
.table-header-rotated {
 
  width: auto;
 
 
}
 
.table-header-rotated th.row-header{
text-align: right;
 width: 250px;
 height: 15px;
 font-size:10px;
 padding-right:0px;
}
 
.table-header-rotated td{
  width: 20px;
  height:15px;
  max-width: 20px;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  vertical-align: middle;
  text-align: center;
    white-space: nowrap; /*whether to display in one line or not*/
	  overflow: hidden;
	  background-color: purple;
	  color:white;
}
 
.table-header-rotated th.rotate-45{
  height: 180px;
  width: 20px;
  min-width: 5px;
  max-width: 20px;
  position: relative;
  vertical-align: bottom;
  padding: 0;
  font-size: 10px;
  line-height: 25px;
}
 
.table-header-rotated th.rotate-45 > div{
  position: relative;
  top: 0px;
  left: 0px; /* 80 * tan(45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle*/
  height: 100px;
  -ms-transform:skew(-45deg,0deg);
  -moz-transform:skew(-45deg,0deg);
  -webkit-transform:skew(-45deg,0deg);
  -o-transform:skew(-45deg,0deg);
  transform:skew(-0deg,0deg);
  overflow: hidden;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
   white-space: nowrap; 
 
}
 
.table-header-rotated th.rotate-45 span {
  -ms-transform:skew(45deg,0deg) rotate(315deg);
  -moz-transform:skew(45deg,0deg) rotate(315deg);
  -webkit-transform:skew(45deg,0deg) rotate(315deg);
  -o-transform:skew(45deg,0deg) rotate(315deg);
  transform:skew(0deg,0deg) rotate(271deg);
  position: absolute;
  bottom: 30px; /* 40 cos(45) = 28 with an additional 2px margin*/
  left: -30px; /*Because it looked good, but there is probably a mathematical link here as well*/
  display: inline-block;
 
  width: 85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
  text-align: left;
  white-space: nowrap; /*whether to display in one line or not*/
 
}
 
#container2{
	width:1250px;
	height:740px;
	margin-top:150px;
	background-color:white;
	position:absolute;
	left:10px;
	top:-70px;
	 border-radius: 10px;
 
 
 
}

je suis bloqué sur cette petite chose que me prend la tete

voici une image de mon tableau



Merci beaucoup pour votre aide