Align. vert. div & textarea aux bords d'un tableau

Fermé

GeGaX Messages postés 83 Date d'inscription mardi 20 février 2018 Statut Membre Dernière intervention 25 décembre 2018 - Modifié le 14 mai 2018 à 10:45
GeGaX Messages postés 83 Date d'inscription mardi 20 février 2018 Statut Membre Dernière intervention 25 décembre 2018 - 15 mai 2018 à 08:12

Bonjour,
J'ai "développé" une extension Google Chrome qui ouvre une popup pour me lister des instructions sous cette forme :

J'aimerais pouvoir aligner verticalement la checkbox à la bordure de gauche du tableau et aligner verticalement la version à la bordure de droite.
De même pour les bords gauche et droite de la textarea.

Le tableau est "dynamique" faut comprendre par là, que ça largeur évolue à chaque extraction de données.

Je suis débutant et ne maitrise pas du tout le CSS, d'ou mon post ..., j'ai lu beaucoup de chose sur le CSS mais je m'y perds assez rapidement ...

Ce que je sais, c'est que la popup, d'une extension Chrome, est limitée à 800px en largeur max et qu'il me faut "jouer" sur la taille de police pour que tout le tableau "rentre" dans cette largeur.

Comment mettre en oeuvre les alignements verticaux ?

popup.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body>
<table border="1" align="center">
    <thead>
    <tr>
        <th>Date</th>
        <th>Time</th>
        <th title="Timezone">TZ</th>
        <th>Position</th>
        <th title="Time To Waypoint">TTW</th>
        <th title="Distance To Waypoint">DTW</th>
        <th title="Distance To Go">DTG</th>
        <th title="True Wind Direction">TWD</th>
        <th title="True Wind Speed">TWS</th>
        <th title="True Wind Angle">TWA</th>
        <th title="Bearing To Waypoint - Heading">BTW</th>
        <th>Sail</th>
        <th title="Speed Through Water - Boat speed">STW</th>
        <th title="Average True Wind Angle">ATWA</th>
        <th title="Average Bearing To Waypoint">ABTW</th>
    </tr>
    </thead>
    <tbody id="pointsTable" align="center">
    </tbody>
</table>
<br>
<div id="localtimeDiv">
    <input type="checkbox" id="localtime" tabindex="-1">
    <label>Local Time</label>
</div>
<div id="versionDiv">
    <label>Version</label>
    <label id="version"></label>
</div>
<div id="gpxDiv">
    <input type="button" id="gpxExport" value=".GPX" tabindex="-1">
</div>
<br>
<textarea id="gpxOutput" readonly tabindex="-1">                       .: Click on GPX button for generate file :.
Select All | Copy selection | Paste on your text editor | Save the file with the .gpx extension</textarea>
</body>
<script src="bundle.js"></script>
</html>

popup.css

body {
    height: auto;
    width: 800px;
    /*font-size: 11px;*/
}

#localtimeDiv {
    float: left;
}

#versionDiv {
    float: right;
}

#gpxDiv {
    margin: 0 auto;
    text-align: center;
}

#gpxOutput {
    width: 100%;
}

Merci pour vos conseils

Edit: Y'a t'il un moyen de connaitre la longueur en px de ce tableau ?

A voir également:

Align. vert. div & textarea aux bords d'un tableau
Tableau croisé dynamique - Guide
Tableau ascii - Guide
Comment faire un tableau - Guide
Trier un tableau excel - Guide
Comment imprimer un tableau excel sur une seule page - Guide

1 réponse

Réponse 1 / 1

tyranausor Messages postés 3545 Date d'inscription jeudi 6 août 2009 Statut Membre Dernière intervention 1 avril 2022 2 035
14 mai 2018 à 21:45

Bonjour, sous Chrome tu as des outils de développeur et si tu cherches, tu as des extensions comme "Web developer" téléchargeable ici pour tester ton extension.

GeGaX Messages postés 83 Date d'inscription mardi 20 février 2018 Statut Membre Dernière intervention 25 décembre 2018
15 mai 2018 à 08:12

Bonjour,
J'ai résolu ma problèmatique comme ceci

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="popup.css">
    </head>
    <body>
        <div id="containerDiv">
            <table border="1" align="center">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Time</th>
                        <th title="Timezone">TZ</th>
                        <th>Position</th>
                        <th title="Time To Waypoint">TTW</th>
                        <th title="Distance To Waypoint">DTW</th>
                        <th title="Distance To Go">DTG</th>
                        <th title="True Wind Direction">TWD</th>
                        <th title="True Wind Speed">TWS</th>
                        <th title="True Wind Angle">TWA</th>
                        <th title="Bearing To Waypoint - Heading">BTW</th>
                        <th>Sail</th>
                        <th title="Speed Through Water - Boat speed">STW</th>
                        <th title="Average True Wind Angle">ATWA</th>
                        <th title="Average Bearing To Waypoint">ABTW</th>
                    </tr>
                </thead>
                <tbody id="pointsTable" align="center">
                </tbody>
            </table>
            <br>
            <div id="localtimeDiv">
                <input type="checkbox" id="localtime" tabindex="-1">
                <label>Local Time</label>
            </div>
            <div id="versionDiv">
                <label>Version</label>
                <label id="version"></label>
            </div>
            <div id="gpxDiv">
                <input type="button" id="gpxExport" value=".GPX" tabindex="-1">
            </div>
            <br>
            <textarea id="gpxOutput" readonly tabindex="-1">                       ..:: Click on GPX button for generate file ::..
Select All | Copy selection | Paste on your text editor | Save the file with the .gpx extension</textarea>
        </div>
    </body>
    <script src="bundle.js"></script>
</html>

popup.css

body {
    height: auto;
    font-size: 11px;
}

#containerDiv {
    width:100%;
}

#containerDiv table {
    margin: 0px;
    text-align: center;
    width: 785px;
}

#localtimeDiv {
    float: left;
}

#versionDiv {
    float: right;
}

#gpxDiv {
    margin: 0 auto;
    text-align: center;
}

#gpxOutput {
    width: calc(100% - 5px);
}

Discussions similaires

Snapchat que veux dire le petit point vert

Bibliothèque

Trouver le nom d'un tableau avec sa photo.

Formule taux de marque

Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport