Bonjour à tous,
Je rencontre un problème avec une table contenant un nombre variable de cellule et de lignes. Dans chaque cellule, il y a un formulaire (configuration d'écran).
A partir d'un certain nombre de cellule (exemple 3*3) le formulaire devient trop grand et agrandi les cellules en largeur et donc le tableau s'agrandit aussi et sort de mon cadre.
J'ai tenté avec des "overflow:auto" multiples mais je n'ai pas réussi ; j'ai le cerveau en compote en cette fin d'année.
mon tableau :
Avec cela j'obtiens mon tableau entier en scrollable ; mais ce que je voudrais c'est que le tableau ne dépasse pas du cadre parent et ne soit pas scrollable ; que çà largeur reste à 100% et que ce soit les cellules qui gère le scroll.
J'ai tenté sur les cellules la même choses avec "display:block" et "display:inline-block" le problème c'est que je perds la structure tableau initial ; les cellules se mettent les unes en dessous des autres.
Avez vous une petite piste à me donner ?
Merci à tous !
Je rencontre un problème avec une table contenant un nombre variable de cellule et de lignes. Dans chaque cellule, il y a un formulaire (configuration d'écran).
A partir d'un certain nombre de cellule (exemple 3*3) le formulaire devient trop grand et agrandi les cellules en largeur et donc le tableau s'agrandit aussi et sort de mon cadre.
J'ai tenté avec des "overflow:auto" multiples mais je n'ai pas réussi ; j'ai le cerveau en compote en cette fin d'année.
mon tableau :
<table id='gestion_ecrans'>
<?php if($nb_ecran_hauteur && $nb_ecran_hauteur>0 && $nb_ecran_largeur && $nb_ecran_largeur>0){
$position=1;
for($y=0 ; $y<$nb_ecran_hauteur ; $y++){
?><tr>
<?php for($x=0 ; $x<$nb_ecran_largeur ; $x++){
?><td id='position_<?php echo $position; ?>' class='ecran'>
<div class='libelle_position'><?php echo $position; ?></div>
<div class="td_ecran_content">
<div class="infos_position" id="infos_position_<?php echo $position; ?>">
<table class="style1">
<tr>
<th>Mac Adress</th>
<th>IP Adress</th>
</tr>
<tr class="even">
<td>
<input type="text" name="mac_adress_<?php echo $position; ?>" id="mac_adress_<?php echo $position; ?>" class="mac_adress" value="<?php if(isset($ecrans[$position])){ echo $ecrans[$position]['macAdress']; } ?>"/>
</td>
<td>
<input type="text" name="ip_adress_<?php echo $position; ?>" id="ip_adress_<?php echo $position; ?>" class="ip_adress" value="<?php if(isset($ecrans[$position])){ echo $ecrans[$position]['ipAdress']; } ?>"/>
</td>
</tr>
</table>
</div>
<div class='caracteristique_position' id='caracteristiques_<?php echo $position; ?>'></div>
</div>
</td><?php
$position++;
} ?>
</tr><?php
}
} ?>
</table>
#gestion_ecrans{
display: block;
overflow: auto;
}
#gestion_ecrans td.ecran{
background-color: #777;
vertical-align: top;
position : relative;
border : 20px solid #333;
border-radius: 1em;
}
#gestion_ecrans td .libelle_position{
color: #666;
text-shadow: -1px -1px 1px #333;
font-size: 40px;
line-height: 40px;
position : absolute;
top : 5px;
left : 10px;
}
#gestion_ecrans td.ecran div.td_ecran_content{
margin: 5px 5px 5px 75px;
overflow: auto;
height: 190px;
}
#gestion_ecrans td.ecran div.td_ecran_content div.infos_position{
margin-bottom: 5px;
}
Avec cela j'obtiens mon tableau entier en scrollable ; mais ce que je voudrais c'est que le tableau ne dépasse pas du cadre parent et ne soit pas scrollable ; que çà largeur reste à 100% et que ce soit les cellules qui gère le scroll.
J'ai tenté sur les cellules la même choses avec "display:block" et "display:inline-block" le problème c'est que je perds la structure tableau initial ; les cellules se mettent les unes en dessous des autres.
Avez vous une petite piste à me donner ?
Merci à tous !