IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Scroll de la TABLE mal placé


Sujet :

Défilement en CSS

  1. #1
    Invité
    Invité(e)
    Par défaut Scroll de la TABLE mal placé
    Code php : 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
    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
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    <?php
    try{
        $bdd=new PDO('mysql:host=localhost;dbname=pcg;charset=utf8', 'root','');
        $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);// afficher les erreurs php
    }catch(Exception $e){
        die('Erreur :' . $e->getMessage());
    }
    $response = $bdd->query('SELECT * FROM ecriturescomptables');
    $ecriturescomptables = $response->fetchAll();
    $response->closeCursor();
    if(!empty($_POST)){ 
        if(empty($erreurs)){
                $dateoperation = $_POST['date_operation'];
                $journal = $_POST['journal'];
                $compte = $_POST['numerocompte'];
                $libelle = $_POST['libelle_comptable'];
                $debit = $_POST['debit'];
                $credit = $_POST['credit'];
        }
    }
    if (!empty($_POST)) {
        // On traite le formulaire
        $errors = [];
        // On valide les données champs par champ
        $journal = '';
        if (!empty($_POST['journal'])){
            if(!preg_match('#^[a-zA-Z\-\'ÀÁÂÃÄÅàáâãäåÒÓÔÕÖØòóôõöøÈÉÊËèéêëÇçÌÍÎÏìíîïÙÚÛÜùúûüÿÑñ ]{1,50}$#', $_POST['journal'])) {
                $errors[] = 'Champ journal invalide';
            } else {
                $nom = $_POST['journal'];
            }
        } else {
            $errors[] = 'Champ journal non renseigné';
        }
        // on n'utilise pas !empty pour gérer le cas où la valeur est 0
        $compte = '';
        if (!empty($_POST['numerocompte'])){
            if(!preg_match('#^[0-9]{1,10}?$#', $_POST['numerocompte'])) {
                $errors[] = 'Champ numéro de compte invalide';
            } else {
                $compte = $_POST['numerocompte'];
            }
        } else {
            $errors[] = 'Champ compte non renseigné';
        }
        $libelle = '';
        if (!empty($_POST['libelle_comptable'])){
            if(!preg_match('#^[a-zA-Z\-\'ÀÁÂÃÄÅàáâãäåÒÓÔÕÖØòóôõöøÈÉÊËèéêëÇçÌÍÎÏìíîïÙÚÛÜùúûüÿÑñ ]{1,50}$#', $_POST['libelle_comptable'])) {
                $errors[] = 'Champ libellé invalide';
            } else {
                $libelle = $_POST['libelle_comptable'];
            }
        } else {
            $errors[] = 'Champ libellé non renseigné';
        }
        $debit = '';
        if (isset($_POST['debit'])){
            if(!preg_match('#^[0-9]{1,10}([.,][0-9]{1,2})?$#', $_POST['debit'])) {
                $errors[] = 'Champ débit invalide';
            } else {
                $debit = str_replace(',', '.', $_POST['debit']);
            }
        } else {
            $errors[] = 'Champ débit non renseigné';
        }
        $credit = '';
        if (isset($_POST['credit'])){
            if(!preg_match('#^[0-9]{1,10}([.,][0-9]{1,2})?$#', $_POST['credit'])) {
                $errors[] = 'Champ crédit invalide';
            } else {
                $crebit = str_replace(',', '.', $_POST['credit']);
            }
        } else {
            $errors[] = 'Champ crédit non renseigné';
        }
     
        // On insère si il n'y a pas d'erreurs : 
        if(empty($errors)){
            // insertion dans la BDD
            $ecriturescomptables = $bdd->prepare("INSERT INTO ecriturescomptables(date_operation, journal, numerocompte, libelle_comptable, debit, credit) VALUES(?,?,?,?,?,?)");
            $ecriturescomptables->execute(array(
    			$_POST['date_operation'],
    			$_POST['journal'],
                $_POST['numerocompte'],
    			$_POST['libelle_comptable'],
    			$_POST['debit'],
                $_POST['credit']));
            if($ecriturescomptables->rowCount()>0){
                $successMsg = 'L\'écriture a bien été ajouté !';
            }else{
                $errors[] = 'Suite à un problème dans la base de données, le client douteux n\'a pas pu être ajouté !';
            }
            $ecriturescomptables->closeCursor();
        }
    }
    //Calcul des totaux débit et crédit et solde respectif
    $response1=$bdd->query('SELECT SUM(debit) AS soldedebiteur, SUM(credit) AS soldecrediteur FROM ecriturescomptables');
    $totaux=$response1->fetchAll();
     
    if(!empty($_POST)){
        echo'<script>window.location.href("ecriturescomptables.php")</script>';
    }
    ?>
    <!DOCTYPE html>
    <html lang="fr">
     
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="../css/bootstrap.css">
        <link rel="stylesheet" href="../css/style.css">
        <link rel="stylesheet" href="../css/carousel.css">
        <title>Comptabilité</title>
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
     
    <body>
        <?php 
    if (!empty($errors)) :
        foreach ($errors as $error) :
    ?>
        <div class="alert alert-danger" role="alert"><?php echo $error;?></div>
        <?php
        endforeach;
    endif;
    ?>
     
        <?php 
    if (!empty($successMsg)) :
    ?>
        <div class="alert alert-success" role="alert"><?php echo $successMsg;?></div>
        <?php
    endif;
    ?>
        <div id="ecriturescomptables">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <h1 style="font-size:25px;text-align:center;color:black;">Journal des écritures</h1>
                        <form name="ecriturescomptables" method="POST" action="ecriturescomptables.php">
                            <input name="date_operation" id="date_operation" type="date" placeholder="date">
                            <input name="journal" id="journal" type="text" placeholder="journal">
                            <input name="numerocompte" id="numerocompte" type="text" placeholder="numéro de compte">
                            <input name="libelle_comptable" id="libelle_comptable" type="text" placeholder="libellé">
                            <input name="debit" id="debit" type="text" placeholder="débit">
                            <input name="credit" id="credit" type="text" placeholder="crédit">
                            <input type="submit" value="Envoyer">
                        </form><br>
                        <?php
                        if (!empty($ecriturescomptables)){
                            $response = $bdd->query('SELECT * FROM ecriturescomptables');
                            $ecriturescomptables = $response->fetchAll();
                            setlocale(LC_ALL, ['fr_FR.UTF8','fra', 'french']);
                        }
                        ?>
                        <div>
                            <table>
                                <thead>
                                    <tr>
                                        <th>Date de l'opération</th>
                                        <th>Journal</th>
                                        <th>N° de compte</th>
                                        <th>Libellé</th>
                                        <th>Débit</th>
                                        <th>Crédit</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php
                                        if(!empty($ecriturescomptables)){
                                            foreach($ecriturescomptables as $data){
                                                $dateoperation = new DateTime($data['date_operation']);
                                                $debit = htmlspecialchars($data['debit']);
                                                $credit = htmlspecialchars($data['credit']);
                                                if ($debit == 0){
                                                    echo '<tr><td>'.utf8_encode(strftime('%d %B %Y', $dateoperation->format('U'))).'</td><td>'.htmlspecialchars($data['journal']).'</td><td>'.htmlspecialchars($data['numerocompte']).'</td><td>'.htmlspecialchars($data['libelle_comptable']).'</td><td>'.''.'</td><td>'.number_format($credit, 2, ',', ' ').'</td></tr>';
                                                }else {
                                                    echo '<tr><td>'.utf8_encode(strftime('%d %B %Y', $dateoperation->format('U'))).'</td><td>'.htmlspecialchars($data['journal']).'</td><td>'.htmlspecialchars($data['numerocompte']).'</td><td>'.htmlspecialchars($data['libelle_comptable']).'</td><td>'.number_format($debit, 2, ',', ' ').'</td><td>'.''.'</td></tr>';
                                                }
                                            }
                                        }
                                    ?>
                                </tbody>
                                <tfoot>
                                    <?php
                                if (!empty($totaux)){
                                    foreach($totaux as $total){
                                        $totaldebit = $total['soldedebiteur'];
                                        $totalcredit = $total['soldecrediteur'];
                                        echo '<tr><td class="bg">'.''.'</td><td class="bg">'.''.'</td><td class="bg">'.''.'</td><td class="bg">'.''.'</td><td class="totaux">'.number_format($totaldebit, 2, ',', ' ').'</td><td class="totaux">'.number_format($totalcredit, 2, ',', ' ').'</td></tr>';
                                    }
                                }
                            ?>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
     
        <script type="application/javascript" src="js/jquery-3.3.1.min.js"></script>
        <script src="js/script.js"></script>
    </body>
     
    </html>

    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
    #ecriturescomptables table{
    	position:absolute;
        left:50%;
        transform: translateX(-50%);
        text-align: center;
        border-style: double;
        border-bottom: outset;
        width: 120%;
    }
    #ecriturescomptables input{
    	width: 180px;
    	position:relative;
        transform: translateX(-25%);
    }
    #ecriturescomptables tr, th{
        border:1px solid black;
        background:white;
        font-size: 12px;
    }
    #ecriturescomptables table td.totaux{
        border-top:double;
        font-weight: bold;
    }
    #ecriturescomptables table tr:nth-child(even) {
        background-color: lightgrey;
    }
    #ecriturescomptables table td.bg{
        background: grey;
    }
    #ecriturescomptables tbody{
        height:550px;
        display:block;
        overflow-y:scroll;
        width: auto;
        position: relative;
    }
    Nom : 14.jpg
Affichages : 156
Taille : 116,3 Ko

    Bonjour,

    Mon souci est que je n'arrive pas à mettre le scroll vertical à droite du tableau. Il est à droite de la 1ère colonne comme le montre l'image.

    Merci d'avance.
    Dernière modification par NoSmoking ; 12/09/2019 à 09h27.

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Montre le code HTML généré.

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 957
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 957
    Points : 44 121
    Points
    44 121
    Par défaut
    Bonjour,
    à partir du moment où tu mets un <tbody> en display:block, celui-ci est « détaché » du <thead> et le format des cellules est rompu, en d'autres termes c'est chacun pour soi les largeurs des cellules s'auto gèrent entre ces deux éléments.

    • Si tu dois supporter IE il te faut définir des largeurs communes pour les <th> et les <td> en précisant un max-width et un min-width.

    • Dans le cas contraire supprime le display:block du <tbody> et mets un display:sticky sur les <th> de ton <thead>.

  4. #4
    Invité
    Invité(e)
    Par défaut
    Le display:sticky ne donne rien

  5. #5
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par jreaux62 Voir le message
    Montre le code HTML généré.

  6. #6
    Invité
    Invité(e)
    Par défaut
    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
    50
    51
    52
    53
    54
    55
    56
    57
    58
    <!DOCTYPE html>
    <html lang="fr">
     
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="../css/bootstrap.css">
        <link rel="stylesheet" href="../css/style.css">
        <link rel="stylesheet" href="../css/carousel.css">
        <title>Comptabilité</title>
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
     
    <body>
     
            <div id="ecriturescomptables">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <h1 style="font-size:25px;text-align:center;color:black;">Journal des écritures</h1>
                        <form name="ecriturescomptables" method="POST" action="ecriturescomptables.php">
                            <input name="date_operation" id="date_operation" type="date" placeholder="date">
                            <input name="journal" id="journal" type="text" placeholder="journal">
                            <input name="numerocompte" id="numerocompte" type="text" placeholder="numéro de compte">
                            <input name="libelle_comptable" id="libelle_comptable" type="text" placeholder="libellé">
                            <input name="debit" id="debit" type="text" placeholder="débit">
                            <input name="credit" id="credit" type="text" placeholder="crédit">
                            <input type="submit" value="Envoyer">
                        </form><br>
                                            <div>
                            <table>
                                <thead>
                                    <tr>
                                        <th>Date de l'opération</th>
                                        <th>Journal</th>
                                        <th>N° de compte</th>
                                        <th>Libellé</th>
                                        <th>Débit</th>
                                        <th>Crédit</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr><td>31 décembre 1995</td><td>od</td><td>101</td><td>balance avant inventaire</td><td></td><td>1 500 000,00</td></tr><tr><td>31 décembre 1995</td><td>od</td><td>108</td><td>balance avant inventaire</td><td>120 000,00</td><td></td></tr><tr><td>31 décembre 1995</td><td>od</td><td>151</td><td>balance avant inventaire</td><td></td><td>40 000,00</td></tr><tr><td>31 décembre 1995</td><td>od</td><td>168</td><td>balance avant inventaire</td><td></td><td>250 000,00</td></tr><tr><td>31 décembre 1995</td><td>od</td><td>201</td><td>balance avant inventaire</td><td>15 000,00</td><td></td></tr><tr><td>31 décembre 1995</td><td>od</td><td>205</td><td>balance avant inventaire</td><td>20 000,00</td><td></td></tr><tr><td>31 décembre 1995</td><td>od</td><td>211</td><td>balance avant inventaire</td><td>370 000,00</td><td></td></tr><tr><td>31 décembre 1995</td><td>od</td><td>213</td><td>balance avant inventaire</td><td>850 000,00</td><td></td></tr><tr><td>31 décembre 1995</td><td>od</td><td>215</td><td>balance avant inventaire</td><td>830 000,00</td><td></td></tr><tr><td>31 décembre 1995</td><td>od</td><td>2182</td><td>balance avant inventaire</td><td>195 000,00</td><td></td></tr><tr><td>31 décembre 1995</td><td>od</td><td>2183</td><td>balance avant inventaire</td><td>85 000,00</td><td></td></tr><tr><td>31 décembre 1995</td><td>od</td><td>2184</td><td>balance avant inventaire</td><td>60 000,00</td><td></td></tr><tr><td>31 décembre 1995</td><td>od</td><td>238</td><td>balance avant inventaire</td><td>10 000,00</td><td></td></tr><tr><td>31 décembre 1995</td><td>od</td><td>261</td><td>balance avant inventaire</td><td>220 000,00</td><td></td></tr><tr><td>31 décembre 1995</td><td>od</td><td>272</td><td>balance avant inventaire</td><td>4 000,00</td><td></td></tr><tr><td>31 décembre 1995</td><td>od</td><td>275</td><td>balance avant inventaire</td><td>1 500,00</td><td></td></tr><tr><td>31 décembre 1995</td><td>od</td><td>2801</td><td>balance avant inventaire</td><td></td><td>10 000,00</td></tr><tr><td>31 décembre 1995</td><td>od</td><td>2813</td><td>balance avant inventaire</td><td></td><td>34 000,00</td></tr><tr><td>31 décembre 1995</td><td>od</td><td>2815</td><td>balance avant inventaire</td><td></td><td>531 200,00</td></tr><tr><td>31 décembre 1995</td><td>od</td><td>28182</td><td>balance avant inventaire</td><td></td><td>46 609,00</td></tr><tr><td>31 décembre 1995</td><td>od</td><td>28183</td><td>balance avant inventaire</td><td></td><td>20 000,00</td></tr><tr><td>31 décembre 1995</td><td>od</td><td>28184</td><td>balance avant inventaire</td><td></td><td>12 000,00</td></tr><tr><td>31 décembre 1995</td><td>od</td><td>2961</td><td>balance avant inventaire</td><td></td><td>10 000,00</td></tr><tr><td>31 décembre 1995</td><td>od</td><td>31</td><td>balance avant inventaire</td><td>150 000,00</td><td></td></tr><tr><td>31 décembre 1995</td><td>od</td><td>326</td><td>balance avant inventaire</td><td>60 000,00</td><td></td></tr><tr><td>31 décembre 1995</td><td>od</td><td>35</td><td>balance avant inventaire</td><td>130 000,00</td><td></td></tr><tr><td>31 décembre 1995</td><td>od</td><td>37</td><td>balance avant inventaire</td><td>180 000,00</td><td></td></tr><tr><td>31 décembre 1995</td><td>od</td><td>397</td><td>balance avant inventaire</td><td></td><td>30 000,00</td></tr><tr><td>31 décembre 1995</td><td>od</td><td>401</td><td>balance avant inventaire</td><td></td><td>121 000,00</td></tr><tr><td>31 décembre 1995</td><td>od</td><td>403</td><td>balance avant inventaire</td><td></td><td>73 716,00</td></tr><tr><td>31 décembre 1995</td><td>od</td><td>404</td><td>balance avant inventaire</td><td></td><td>24 800,00</td></tr><tr><td>31 décembre 1995</td><td>od</td><td>405</td><td>balance avant inventaire</td><td></td><td>15 000,00</td></tr><tr><td>31 décembre 1995</td><td>od</td><td>4096</td><td>balance avant inventaire</td><td>6 200,00</td><td></td></tr><tr><td>31 décembre 1995</td><td>od</td><td>411</td><td>balance avant inventaire</td><td>145 000,00</td><td></td></tr><tr><td>31 décembre 1995</td><td>od</td><td>413</td><td>balance avant inventaire</td><td>54 000,00</td><td></td></tr><tr><td>31 décembre 1995</td><td>od</td><td>416</td><td>balance avant inventaire</td><td>74 718,00</td><td></td></tr><tr><td>31 décembre 1995</td><td>od</td><td>4196</td><td>balance avant inventaire</td><td></td><td>4 800,00</td></tr><tr><td>31 décembre 1995</td><td>od</td><td>421</td><td>balance avant inventaire</td><td></td><td>54 300,00</td></tr><tr><td>31 décembre 1995</td><td>od</td><td>425</td><td>balance avant inventaire</td><td>8 500,00</td><td></td></tr><tr><td>31 décembre 1995</td><td>od</td><td>427</td><td>balance avant inventaire</td><td></td><td>3 000,00</td></tr>                            </tbody>
                                <tfoot>
                                    <tr><td class="bg"></td><td class="bg"></td><td class="bg"></td><td class="bg"></td><td class="totaux">3 588 918,00</td><td class="totaux">2 780 425,00</td></tr>                            </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
     
        <script type="application/javascript" src="js/jquery-3.3.1.min.js"></script>
        <script src="js/script.js"></script>
    </body>
     
    </html>
    Dernière modification par ProgElecT ; 12/09/2019 à 13h14. Motif: S'il vous plait, autant que possible, indiquer le langage utilisé, [CODE=xyz], pour activer la bonne coloration syntaxique.

  7. #7
    Invité
    Invité(e)
    Par défaut
    On avait fait ça tantôt (JS) : https://codepen.io/jreaux62/pen/eLoOKM
    A adapter avec le <tfoot>.

  8. #8
    Invité
    Invité(e)
    Par défaut
    Il n'y a pas une méthode plus simple, par hasard ?

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 957
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 957
    Points : 44 121
    Points
    44 121
    Par défaut
    Citation Envoyé par mike711 Voir le message
    Le display:sticky ne donne rien
    effectivement ma réponse a été un peu laconique

    Dans le cas d'utilisation de display:sticky il faut mettre la <table> dans un conteneur qui va lui définir les dimensions du scroll.

    J'avais commencé des fichiers de démos, je les mets en ligne même si ils ne sont pas aboutis et toujours en cours (plus de 3ans quand même, j'ai honte (même pas!))


    peut être que cela va m’inciter à les terminer

  10. #10
    Invité
    Invité(e)

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. texte mal placé
    Par brisso dans le forum Balisage (X)HTML et validation W3C
    Réponses: 9
    Dernier message: 15/11/2005, 19h43

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo