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

GeGaX Messages postés 83 Date d'inscription Statut Membre Dernière intervention -
GeGaX Messages postés 83 Date d'inscription Statut Membre Dernière intervention - 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 ?

Afficher la suite

A voir également:

Align. vert. div & textarea aux bords d'un tableau
Tableau word - Guide
Trier un tableau excel - Guide
Tableau ascii - Guide
Imprimer un tableau excel - Guide
Tableau croisé dynamique - Guide

1 réponse

Réponse 1 / 1

tyranausor Messages postés 3545 Date d'inscription Statut Membre Dernière intervention 2 039

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 Statut Membre Dernière intervention

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

mail-vert

Formule taux de marque

Écran vert PC portable

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

Votre réponse

Discussions similaires