Alignement vertical div et textarea aux bordures d'un tableau

**rlelamer** · 14/05/2018, 10h19

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

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
<!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

Code css :

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
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 ?

**pasdechances** · 14/05/2018, 11h25

bonjour,
ton tableau doit avoir des propriétés css de base, je te propose dont de reset les propriétés de l’élément table.

ce que tu as fait me parais bon dans l'ensemble.
Je pense que les principaux soucis que tu rencontre viennent des propriétés par défauts des élément css.
le résultat avec la correction de l’élément table :

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="popup.css">
</head>
<style media="screen">
    body {
        height: auto;
        width: 800px;
        /*font-size: 11px;*/
    }
    table{
        margin: 0;
        width: 100%;
    }
 
    #localtimeDiv {
        float: left;
    }
 
    #versionDiv {
        float: right;
    }
 
    #gpxDiv {
        margin: 0 auto;
        text-align: center;
    }
 
    #gpxOutput {
        width: 100%;
    }
</style>
<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>

**rlelamer** · 14/05/2018, 11h41

Bonjour et merci pour ta réponse

Si j'ai bien compris ton code (que j'ai testé et qui fonctionne), c'est d'adapter le tableau aux div et à textarea ?

Si je veux faire l'inverse, la popup sera plus petite, comment je fais ça ?

**pasdechances** · 14/05/2018, 11h56

Pour faire l'inverse pas de soucis il faut juste récupérer le margin par défaut du tableau et le faire hérité a tes div.
j'ai un peut modifier le code :

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="popup.css">
</head>
<style media="screen">
    body {
        height: auto;
        width: 800px;
        /*font-size: 11px;*/
    }
    .ligne,
    table{
        margin: 0px 70px;
    }
 
    #localtimeDiv {
        float: left;
    }
 
    #versionDiv {
        float: right;
    }
 
    #gpxDiv {
        margin: 0 auto;
        text-align: center;
    }
 
    #gpxOutput {
        width: 99%;
    }
</style>
<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 class="ligne">
        <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>

**rlelamer** · 14/05/2018, 12h11

Merci, je viens de tester ce nouveau code

et voici le résultat

Les alignements sont comme je le souhaite, c'est donc parfait

En revanche le tableau passe sur 2 lignes par cellules , pourquoi ?
Comment dois je faire pour qu'il repasse sur 1 seule ligne ?

Autre question, le css est intégré au code html maintenant donc je dois supprimer mon fichier popup.css ainsi que cette ligne dans le fichier html ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" type="text/css" href="popup.css">

**pasdechances** · 14/05/2018, 13h14

oui il passe sur 2 lignes
avec les changements que j'ai réalisé le tableau n'a pas une taille de 800px mais 800-70px gauche - 70px droite donc 660px
si tu veux que le tableau soit de 800px, mais les marges a 0px.

Alignement vertical div et textarea aux bordures d'un tableau

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager