28172 sujets

CSS et mise en forme, CSS3

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 :

<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 !
salut,
perso je pense qu'il faut déjà garder le display original du <table> et ne pas le passer en "block". Tu pourrais passer par un "table-layout:fixed" et donner une largeur de "100%" à ton tableau. Pour les scroll je ne sais plus trop si c'est possible de le faire directement sur les <td>. Tu pourrais englober tes formulaires dans une <div> et lui passer un "overflow:auto".
Merci beaucop Zelalsan !

J'ai donc mis :

CSS

#gestion_ecrans{
    table-layout: fixed;
    width : 100%;
}


Honnêtement je n'y croyais pas, je n'avais pas pensé au table-layout : fixed Smiley smile mais çà marche ! Encore merci, tu sais pas comment tu viens de mettre fin à des heures de psychotage sur comment cela pourrait se faire ; j'en venais à douter de ma structure initiale XD!

Merci ! Merci !