Menu

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

Messages postés
84
Date d'inscription
mardi 20 février 2018
Dernière intervention
25 décembre 2018
-
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 

Votre réponse

1 réponse

Messages postés
3498
Date d'inscription
jeudi 6 août 2009
Dernière intervention
8 janvier 2019
1126
0
Merci
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
84
Date d'inscription
mardi 20 février 2018
Dernière intervention
25 décembre 2018
-
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);
}
Commenter la réponse de tyranausor