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 :

Alignement vertical div et textarea aux bordures d'un tableau


Sujet :

Positionnement en CSS

  1. #21
    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 119
    Points
    44 119
    Par défaut
    Citation Envoyé par rlelamer
    <tfoot> est un échec ... il me place les <div> et <textarea> au dessus du tableau ...
    en quoi est ce un échec, mauvaise utilisation des balises enfants peut être !?!
    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
    <tfoot>
      <tr>
        <td colspan="40"> <!-- sera réajusté par le navigateur -->
          <div id="localtimeDiv">
            <input type="checkbox" id="localtime" tabindex="-1">
            <label>Local Time</label>
          </div>
          <div id="gpxDiv">
            <input type="button" id="gpxExport" value=".GPX" tabindex="-1">
          </div>
          <div id="versionDiv">
            <label>Version </label>
            <label id="version">3</label>
          </div>
          <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>
        </td>
      </tr>
    </tfoot>
    et en ajustant le CSS
    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
    tfoot td {
      border: none;
    }
    #gpxOutput {
      box-sizing: border-box;
      width: 100%;
    }
    tfoot td div {
      float: left;
      width: 33.33%;
      margin: .5em 0 1em;
    }
    #versionDiv {
      text-align: right;
    }
    #gpxDiv {
      text-align: center;
    }
    #conteneur {
      margin: auto;
      border: 1px solid #CCC;
    }

  2. #22
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 320
    Points : 79
    Points
    79
    Par défaut
    Oui un échec dans ma mise en œuvre en aucun cas je parlais de la balise en elle même. ( je me suis mal exprimé, désolé )

    Je testerais également cette mise en œuvre, je m’appercois qu’il doit être possible d’arriver au résultat souhaité de différentes façons.
    Maintenant comment choisir la bonne aucune idée et pas assez de connaissances pour la déterminer

    Merci pour le code, je reviens ici après le test

  3. #23
    Invité
    Invité(e)
    Par défaut
    Le choix, c'est à toi de le faire.

    Quelques critères : ergonomie, lisibilité,...

  4. #24
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 320
    Points : 79
    Points
    79
    Par défaut
    Merci à vous 3, avec tout ça si j’y arrive pas c’est que le problème se trouve entre le pc et la chaise ...
    J’vais faire un mixte de tout ces bons conseils / codes et je verrais si ça fonctionne correctement
    Merci encore

  5. #25
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 320
    Points : 79
    Points
    79
    Par défaut
    @jreaux62

    Bonsoir,
    J'ai utilisé la totalité de ta proposition mais en version "épurée". Par là, j'entends que je n'ai pas mis certains paramètres css volontairement ou parce que je ne vois pas de différence avec ou sans ( tu pourras surement m'en dire plus sur leurs fonctionnalités ).

    Voici ce que ça donne par rapport aux fichiers du premier post :

    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
    <!doctype html>
    <html>
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" type="text/css" href="popup.css">
        </head>
        <body>
            <div class="table-wrap"> <!-- Ajout de la <div> pour gérer le tableau -->
                <table>
                    <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>
            </div> <!-- Fin de la <div> -->
            <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>

    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
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    body {
        /*height: auto;*/     /* je laisse le navigateur gérer ça */
        /*width: 800px;*/     /* je laisse le navigateur gérer ça */
        font-size: 11px;
    }
     
    #localtimeDiv {
        float: left;
    }
     
    #versionDiv {
        float: right;
    }
     
    #gpxDiv {
        margin: 0 auto;
        text-align: center;
    }
     
    #gpxOutput {
        width: calc(100% - 5px);     /* ça je l'ai pris à pasdechances */ 
    }
     
    .table-wrap {
      /*position: relative;*/     /* pas vu de différence avec ou sans */
      border: 1px solid black;     /* ajouté pour obtenir le même rendu qu'avant */
      overflow-y: auto;
      overflow-x: auto;
    }
     
    .table-wrap table {
      /*position: relative;*/     /* pas vu de différence avec ou sans */
      /*width:100%;*/     /* je laisse le navigateur gérer ça */
      text-align: center;
      /*font-family: arial,sans-serif;*/     /* je laisse le navigateur gérer ça */
      /*font-size: 12px;*/     /* défini dans body */
    }
     
    .table-wrap table th, .table-wrap table td {
      border: 1px solid black;
      padding: 1px;     /* passé à 1px comme avant */
      white-space: nowrap;     /* parfait ce "paramètre" */
    }

    Ce qui me donne par exemple :
    - Avec temps UTC :


    - Avec "Local Time" d'activé :


    La différence n'est pas flagrante, mais le comportement est celui que je souhaitais obtenir

    @pasdechances
    Merci pour le bout de code de gpxOutput, calc(100% - 5px)

    @NoSmoking
    J'ai jamais réussi à obtenir quelque chose avec <tfoot>, je me demande si c'est utilisable dans une extension Chrome ou alors je suis idiot vu que je n'arrive pas à le mettre correctement en place...

  6. #26
    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 119
    Points
    44 119
    Par défaut
    @NoSmoking
    J'ai jamais réussi à obtenir quelque chose avec <tfoot>, je me demande si c'est utilisable dans une extension Chrome ou alors je suis idiot vu que je n'arrive pas à le mettre correctement en place...
    je dirais qu'il n'y a aucune raison que cela ne fonctionne pas si tu respectes la structure des <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
    <table>
      <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>
      <tfoot>
        <tr>
          <td colspan="40"> <!-- sera réajusté par le navigateur -->
            <div id="localtimeDiv">
              <input type="checkbox" id="localtime" tabindex="-1">
              <label>Local Time</label>
            </div>
            <div id="gpxDiv">
              <input type="button" id="gpxExport" value=".GPX" tabindex="-1">
            </div>
            <div id="versionDiv">
              <label>Version </label>
              <label id="version">3</label>
            </div>
            <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>
          </td>
        </tr>
      </tfoot>
    </table>
    en tenant compte du CSS que j'ai déjà mentionné.

  7. #27
    Invité
    Invité(e)
    Par défaut
    @NoSmoking

    a moins que ça ait changé, le bloc <tfoot> doit être AVANT le bloc <tbody>.



    Le W3C impose que la balise tfoot apparaisse avant tbody.
    Si vous ne le faites pas, votre page ne passera pas la validation.
    Il est aussi obligatoire de spécifier un tbody si vous avez utilisé plus haut un thead ou un tfoot.

  8. #28
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 320
    Points : 79
    Points
    79
    Par défaut
    @NoSmoking
    Ça y est j'ai compris mon erreur ... elle venait de la balise <table> ... <tfoot> était en dehors de celle ci à chacun de mes essais ...

    @jreaux62
    le css te semble correct ou non (les "paramètres" que je n'ai pas mis) ?

    Une dernière question, si je souhaite mettre en place une surbrillance de ligne du tableau en plaçant la souris dessus, j'ai lu sur le net que "hover" faisait le job mais encore une fois je dois mal le placer ... d'après ce que j'ai cru comprendre ça devrait ressembler a quelque chose comme ceci
    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
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    body {
        font-size: 11px;
    }
     
    #localtimeDiv {
        float: left;
    }
     
    #versionDiv {
        float: right;
    }
     
    #gpxDiv {
        margin: 0 auto;
        text-align: center;
    }
     
    #gpxOutput {
        width: calc(100% - 5px);
    }
     
    .table-wrap {
        border: 1px solid black;
    }
     
    .table-wrap table {
        text-align: center;
    }
     
    .table-wrap table th, .table-wrap table td {
        border: 1px solid black;
        padding: 1px;
        white-space: nowrap;
    }
     
    tr.highlighted :hover {
         background-color: yellow;
    }
     
    tr.highlighted {
         background-color: white;
    }

    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
                <table>
                    <thead>
                        <tr class="highlighted">
                            <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>

    Mais ce code ne fonctionne que sur les titres de colonne et sur une cellule
    Qu'est ce que je ne fais pas correctement ? Comment y remédier ?

  9. #29
    Invité
    Invité(e)
    Par défaut
    1- Pas d'espace avant :hover

    Tu devrais rechercher et BIEN lire la DOC (et regarder/tester les exemples donnés)...

    • tr.highlighted :hover applique le Hover sur les enfants (td)
    • tr.highlighted:hover applique le Hover sur le tr


    2- concernant les "paramètres", ça peut être une question de compatibilité des navigateurs (parfois, des préfixes sont nécessaires : -moz-, -webkit-,...).
    Là aussi : lire la DOC.

  10. #30
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 320
    Points : 79
    Points
    79
    Par défaut
    Ok vu pour l'espace ... effectivement ça fonctionne mieux ...
    Maintenant je vais éplucher la doc pour comprendre pourquoi ça fonctionne sur la ligne des titres de chaque colonne mais pas sur les lignes du tableau



    Merci pour l'aide

  11. #31
    Invité
    Invité(e)
    Par défaut
    Parce que tu n'as la classe "highlighted" que sur le tr des titres et pas sur les autres ?

  12. #32
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 320
    Points : 79
    Points
    79
    Par défaut
    J'ai fais pleins de test et lu pas mal de chose sur":hover", je m'y perds ...


    Si je comprends correctement ce que tu me dis, il me faudrait ceci dans le css
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    tr.highlighted:hover { /* sans l'espace devant :hover */
         background-color: yellow;
    }
     
    tr.highlighted {
         background-color: white;
    }

    et ceci dans l'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
                <table>
                    <thead>
                        <tr class="highlighted">
                            <th class="highlighted">Date</th>
                            <th class="highlighted">Time</th>
                            <th class="highlighted" title="Timezone">TZ</th>
                            <th class="highlighted">Position</th>
                            <th class="highlighted" title="Time To Waypoint">TTW</th>
                            <th class="highlighted" title="Distance To Waypoint">DTW</th>
                            <th class="highlighted" title="Distance To Go">DTG</th>
                            <th class="highlighted" title="True Wind Direction">TWD</th>
                            <th class="highlighted" title="True Wind Speed">TWS</th>
                            <th class="highlighted" title="True Wind Angle">TWA</th>
                            <th class="highlighted" title="Bearing To Waypoint - Heading">BTW</th>
                            <th class="highlighted">Sail</th>
                            <th class="highlighted" title="Speed Through Water - Boat speed">STW</th>
                            <th class="highlighted" title="Average True Wind Angle">ATWA</th>
                            <th class="highlighted" title="Average Bearing To Waypoint">ABTW</th>
                        </tr>
                    </thead>
                    <tbody id="pointsTable" align="center">
                    </tbody>
                </table>

    Ou j'ai toujours rien compris ? ...

    C'est pas mon métier développeur ... c'est l'électronique marine et mes cours de bts, que je suivais que d'une oreille parce que ça ne m’intéressait pas, sont loin ... alors désolé pour ces questions idiotes, j'apprends en même temps. En tout cas merci de m'aider c'est sympa.

  13. #33
    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 119
    Points
    44 119
    Par défaut
    Citation Envoyé par jreaux62
    @NoSmoking
    a moins que ça ait changé, le bloc <tfoot> doit être AVANT le bloc <tbody>.
    Oui mais non, dans le lien que tu fourni on parle de XHTML et le X fait toute la différence (enfin presque).

    HTML 3.x : les balise <thead>,</tbody>,<tfoot>... n'existant pas le problème ne se posait même pas

    HTML 4.x : Le début d'une grande confusion !
    La validation retourne une erreur :
    document type does not allow element "TFOOT" here
    mais pourquoi diable ... because
    TFOOT must appear before TBODY within a TABLE definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data.
    La raison est donnée dans « l'imposition ».
    A voir :


    Il en est de même pour XHTML.

    Si on utilise des DOCTYPE comme
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    ou encore
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    alors la réponse est OUI !

    Seulement voilà HTML5 est arrivé et l'ordre c'est inversé, d'où la confusion actuelle, DOCTYPE simplifié, plus de DTD le bonheur quoi

    Maintenant on se retrouve avec
    • The table element
      Citation Envoyé par TABLE
      Content model:
      In this order: optionally a caption element, followed by zero or more colgroup elements, followed optionally by a thead element, followed by either zero or more tbody elements or one or more tr elements, followed optionally by a tfoot element, optionally intermixed with one or more script-supporting elements.
    • The tfoot element
      Citation Envoyé par TFOOT
      Contexts in which this element can be used:
      As a child of a table element, after any caption, colgroup, thead, tbody, and tr elements, but only if there are no other tfoot elements that are children of the table element.

    alors la réponse est mais NON !

  14. #34
    Membre extrêmement actif
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    Avril 2018
    Messages
    537
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Administrateur de base de données

    Informations forums :
    Inscription : Avril 2018
    Messages : 537
    Points : 634
    Points
    634
    Par défaut
    Bonsoir,
    ca a pris une sacré ampleur pour un Alignement vertical div et textarea aux bordures d'un tableau
    Perso , pour pas m'embeter en xhtml 1.0 je met ni thead ni tfoot

  15. #35
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 320
    Points : 79
    Points
    79
    Par défaut
    Bonsoir,
    Peux tu proposer quelque chose en cas ?
    Merci

  16. #36
    Membre extrêmement actif
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    Avril 2018
    Messages
    537
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Administrateur de base de données

    Informations forums :
    Inscription : Avril 2018
    Messages : 537
    Points : 634
    Points
    634
    Par défaut
    Tu utilises html5, la réponse de NoSmoking est bonne

    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
    <tfoot>
      <tr>
        <td colspan="40"> <!-- sera réajusté par le navigateur -->
          <div id="localtimeDiv">
            <input type="checkbox" id="localtime" tabindex="-1">
            <label>Local Time</label>
          </div>
          <div id="gpxDiv">
            <input type="button" id="gpxExport" value=".GPX" tabindex="-1">
          </div>
          <div id="versionDiv">
            <label>Version </label>
            <label id="version">3</label>
          </div>
          <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>
        </td>
      </tr>
    </tfoot>

  17. #37
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 320
    Points : 79
    Points
    79
    Par défaut
    Donc thead et tfoot ?

  18. #38
    Membre extrêmement actif
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    Avril 2018
    Messages
    537
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Administrateur de base de données

    Informations forums :
    Inscription : Avril 2018
    Messages : 537
    Points : 634
    Points
    634
    Par défaut
    En premier table, ensuite thead, ensuite tbody et enfin tfoot

  19. #39
    Invité
    Invité(e)
    Par défaut
    C'est quoi, ce dialogue de sourds ???
    On a pratiquement tout dit sur <tfoot> !!
    Si tu as encore des doutes, fais tes propres recherches... et conclusions !


    D'autant que l'utilisation de <tfoot> est anecdotique ici... et pas forcément idéale.
    C'est mon avis.

  20. #40
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 320
    Points : 79
    Points
    79
    Par défaut
    @jreaux62

    Bonjour,
    J'ai trouvé ! (à force de tester ...)

    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
    49
    50
    <!doctype html>
    <html>
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" type="text/css" href="popup.css">
        </head>
        <body>
            <div class="table-wrap">
                <table>
                    <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>
            </div>
            <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
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    body {
        font-size: 11px;
    }
     
    .table-wrap {
        border: 1px solid black;
    }
     
    .table-wrap table {
        text-align: center;
    }
     
    .table-wrap table th, .table-wrap table td {
        border: 1px solid black;
        padding: 1px;
        white-space: nowrap;
    }
     
    tr:hover td {
         background-color: lightgray;
    }
     
    tr {
         background-color: white;
    }
     
    #localtimeDiv {
        float: left;
    }
     
    #versionDiv {
        float: right;
    }
     
    #gpxDiv {
        margin: 0 auto;
        text-align: center;
    }
     
    #gpxOutput {
        width: calc(100% - 5px);
    }

    donne



    Super ça fonctionne

    En revanche je pige pas pourquoi toutes les cellules de la colonne TWS ne sont pas prises en compte ...

    Dans mon popup.js j'ai ceci ( j'ai commenté ce qui concerne cette colonne )

    popup.js
    Code JS : 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
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    383
    384
    385
    386
    387
    388
    389
    390
    391
    392
    393
    394
    395
    396
    397
    398
    399
    400
    401
    402
    403
    404
    405
    406
    407
    408
    409
    var background = chrome.extension.getBackgroundPage();
        var twaList = [];
        var btwList = [];
        var ttwLast = "T+ 0:00";
        var twaLast = undefined;
        var btwLast = undefined;
     
        function createCell(value, row) {
            var cell = document.createElement("td");
            cell.innerHTML = value;
            row.appendChild(cell);
        }
     
        function positionStyling(value, cell) {
            cell.align = "left";
            cell.innerHTML = value;
        }
     
        function ttwStyling(value, cell) {
            cell.align = "left";
            cell.innerHTML = value;
        }
     
        function dtwStyling(value, cell) {
            cell.align = "left";
            cell.innerHTML = value;
        }
     
        function dtgStyling(value, cell) {
            cell.align = "left";
            cell.innerHTML = value;
        }
     
        /*
        function twsStyling(value1, value2, cell) {
            var tws_foil = value1.replace(" kt", "");
            var twa_bd = value2.replace("\u00B0", "");
            if (tws_foil >= 11.1 && tws_foil <= 39.9 && Math.abs(twa_bd) >= 71 && Math.abs(twa_bd) <= 169) {
                cell.style.backgroundColor = "black";
                cell.style.color = "white";
            } else {
                cell.style.backgroundColor = "white";
                cell.style.color = "black";
            }
            cell.innerHTML = tws_foil + " kt";
        }
        */
     
        function twaStyling(value, cell) {
            var twa_bd = value.replace("\u00B0", "");
            if (twa_bd >= 0) {
                cell.style.color = "green";
            } else {
                cell.style.color = "red";
            }
            cell.innerHTML = Math.abs(twa_bd) + "\u00B0";
        }
     
        function btwStyling(value, cell) {
            cell.style.color = "blue";
            cell.innerHTML = value;
        }
     
        function sailStyling(value, cell) {
            switch (value.trim()) {
                    // Upwind sail
                case "Jib":
                    cell.style.backgroundColor = "#FFD479";
                    break;
                case "LJ":
                    cell.style.backgroundColor = "#FFFC79";
                    break;
                case "Stay":
                    cell.style.backgroundColor = "#D4FB79";
                    break;
                    // Downwind sail
                case "Spi":
                    cell.style.backgroundColor = "#76D6FF";
                    break;
                case "LG":
                    cell.style.backgroundColor = "#7A81FF";
                    break;
                case "HG":
                    cell.style.backgroundColor = "#D783FF";
                    break;
                    // Reaching sail
                case "C0":
                    cell.style.backgroundColor = "#FF7E79";
                    break;
            }
            cell.innerHTML = value;
        }
     
        function atwaStyling(value, cell) {
            if (value >= 0) {
                cell.style.color = "green";
            } else {
                cell.style.color = "red";
            }
            if (value !== "-") {
                cell.innerHTML = Math.abs(value) + "\u00B0";
            } else {
                cell.style.color = "black";
                cell.innerHTML = value;
            }
        }
     
        function abtwStyling(value, cell) {
            cell.style.color = "blue";
            if (value !== "-") {
                cell.innerHTML = value + "\u00B0";
            } else {
                cell.style.color = "black";
                cell.innerHTML = value;
            }
        }
     
        function createCellWithCustomStyling(value, row, customStyling) {
            var cell = document.createElement("td");
            customStyling(value, cell);
            row.appendChild(cell);
        }
     
        /*
        function createCellWithCustomStyling2(value1, value2, row, customStyling) {
            var cell = document.createElement("td");
            customStyling(value1, value2, cell);
            row.appendChild(cell);
        }
        */
     
        function dmsConv(latitude, longitude) {
            var latAbs = Math.abs(latitude);
            var latDeg = Math.trunc(latAbs);
            var latMin = Math.trunc((latAbs - latDeg) * 60);
            var latSec = Math.trunc((((latAbs - latDeg) * 60) - latMin ) * 60);
            var latCard = (latitude >= 0) ? "N" : "S";
     
            var lonAbs = Math.abs(longitude);
            var lonDeg = Math.trunc(lonAbs);
            var lonMin = Math.trunc((lonAbs - lonDeg) * 60);
            var lonSec = Math.trunc((((lonAbs - lonDeg) * 60) - lonMin ) * 60);
            var lonCard = (longitude >= 0) ? "E" : "W";
     
            return zero(latDeg) + "\u00B0" + zero(latMin) + "\u0027" + zero(latSec) + "\u0022" + latCard + " - " + zero(lonDeg) + "\u00B0" + zero(lonMin) + "\u0027" + zero(lonSec) + "\u0022" + lonCard;
        }
     
        function atwaCalc(twaList) {
            const
            twaData = twaList;
            Math.radians = function (degrees) {
                return degrees * Math.PI / 180.0;
            },
                Math.degrees = function (radians) {
                return radians * 180.0 / Math.PI;
            };
     
            let
            arX = [],
            arY = [],
            somX = 0.0,
            somY = 0.0,
            avgX = 0.0,
            avgY = 0.0,
            atwa = 0.0;
     
            for (const [i, angle] of twaData.entries()) {
                arX[i] = Math.cos(Math.radians(angle));
                arY[i] = Math.sin(Math.radians(angle));
            }
     
            for (const value of arX) {
                somX += value;
            }
            avgX = somX / arX.length;
     
            for (const value of arY) {
                somY += value;
            }
            avgY = somY / arY.length;
     
            atwa = Math.round(Math.degrees(Math.atan2(avgY, avgX)));
            if (isNaN (atwa)) {
                atwa = "-";
            }
            return atwa ;
        }
     
        function abtwCalc(btwList) {
            const
            btwData = btwList;
            Math.radians = function (degrees) {
                return degrees * Math.PI / 180.0;
            },
                Math.degrees = function (radians) {
                return radians * 180.0 / Math.PI;
            };
     
            let
            arX = [],
            arY = [],
            somX = 0.0,
            somY = 0.0,
            avgX = 0.0,
            avgY = 0.0,
            abtw = 0.0;
     
            for (const [i, angle] of btwData.entries()) {
                arX[i] = Math.cos(Math.radians(angle));
                arY[i] = Math.sin(Math.radians(angle));
            }
     
            for (const value of arX) {
                somX += value;
            }
            avgX = somX / arX.length;
     
            for (const value of arY) {
                somY += value;
            }
            avgY = somY / arY.length;
     
            abtw = Math.round(Math.degrees(Math.atan2(avgY, avgX)));
            if (isNaN (abtw)) {
                abtw = "-";
            } else if (abtw < 0) {
                abtw += 360;
            }
            return abtw;
        }
     
        function reinitializeDisplay() {
            document.getElementById("pointsTable").innerHTML = "";
        }
     
        function UtcToLocal(date, time) {
            var utcYear = date.split("-")[0];
            var utcMonth = (date.split("-")[1]) - 1;
            var utcDay = date.split("-")[2];
            var utcHour = time.split(":")[0];
            var utcMinutes = time.split(":")[1];
            var dateUtc = Date.UTC(utcYear, utcMonth, utcDay, utcHour, utcMinutes, 0, 0);
     
            var localDate = new Date(dateUtc);
            var year = localDate.getFullYear();
            var month = ("0" + (localDate.getMonth() + 1)).slice(-2);
            var day = ("0" + localDate.getDate()).slice(-2);
            var hours = ("0" + localDate.getHours()).slice(-2);
            var minutes = ("0" + localDate.getMinutes()).slice(-2);
     
            var offset = -localDate.getTimezoneOffset();
            var absOffset = Math.abs(offset);
            var sign = (offset > 0) ? "+" : "-";
            var hoursOffset = Math.trunc(absOffset / 60);
            var MinutesHoursOffset = (hoursOffset === 0) ? "\u00b1" + "0" : sign + hoursOffset;
            var minutesOffset = absOffset % 60;
            var HoursMinutesOffset = (minutesOffset === 0) ? MinutesHoursOffset : sign + hoursOffset + ":" + minutesOffset;
     
            var formattedDate = year + "-" + month + "-" + day;
            var formattedTime = hours + ":" + minutes;
            var formattedTimeZone = "UTC" + HoursMinutesOffset;
            return [formattedDate, formattedTime, formattedTimeZone];
        }
     
        function getTimeZone(timezone) {
            if (timezone === "CET") {
                return "UTC+1";
            } else if (timezone === "CEST") {
                return "UTC+2";
            }
        }
     
        function displayTable(localTime) {
            points.forEach(function (element) {
                var row = document.createElement("tr");
                document.getElementById("pointsTable").appendChild(row);
                if ((localTime && element.timezone === "CET") || (localTime && element.timezone === "CEST")) {
                    var ceZ = getTimeZone(element.timezone);
                    createCell(element.date, row);
                    createCell(element.time, row);
                    createCell(ceZ, row);
                } else if (localTime && element.timezone === "UTC") {
                    var localDTZ = UtcToLocal(element.date, element.time, element.timezone);
                    createCell(localDTZ[0], row);
                    createCell(localDTZ[1], row);
                    createCell(localDTZ[2], row);
                } else {
                    createCell(element.date, row);
                    createCell(element.time, row);
                    createCell(element.timezone, row);
                }
                var position = dmsConv(element.latitude, element.longitude);
                createCellWithCustomStyling(position, row, positionStyling);
                createCellWithCustomStyling(element.ttw, row, ttwStyling);
                createCellWithCustomStyling(element.dtw, row, dtwStyling);
                createCellWithCustomStyling(element.dtg, row, dtgStyling);
                createCell(element.twd, row);
                /* createCellWithCustomStyling2(element.tws, element.twa, row, twsStyling); */
                createCellWithCustomStyling(element.twa, row, twaStyling);
                createCellWithCustomStyling(element.btw, row, btwStyling);
                createCellWithCustomStyling(element.sail, row, sailStyling);
                createCell(element.stw, row);
                createCellWithCustomStyling(element.atwa, row, atwaStyling);
                createCellWithCustomStyling(element.abtw, row, abtwStyling);
                var manifest = chrome.runtime.getManifest();
                document.getElementById("version").innerHTML = manifest.version;
            });
        }
     
        var displayLocal = function () {
            reinitializeDisplay();
            if (document.getElementById("localtime").checked) {
                chrome.storage.local.set({"localTime" : true});
                displayTable(true);
            } else {
                chrome.storage.local.set({"localTime" : false});
                displayTable(false);
            }
        };
     
        document.getElementById("localtime").addEventListener("change", displayLocal);
        var exportGpx = function () {
            let xml = builder.create('gpx');
            xml.att('xmlns','http://www.topografix.com/GPX/1/1');
            xml.att('xmlns:xsi','http://www.w3.org/2001/XMLSchema-instance');
            xml.att('xsi:schemaLocation','http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd');
            xml.att('version','1.0');
            xml.att('creator','Route Zezo.org');
     
            let route = xml.ele('rte');
            route.ele('name', 'RZ ' + points[0].race);
            for (point of points) {
                console.log(point);
                if (point.latitude !== undefined && point.longitude !== undefined) {
                    let routePoint = route.ele('rtept', {lat: point.latitude, lon: point.longitude});
                    routePoint.ele('time', new Date(point.date + "T" + point.time).toISOString());
                    routePoint.ele('name', point.ttw);
                }
            }
            let xmlString = xml.end({pretty: true});
            let gpxOutput = document.getElementById("gpxOutput");
            gpxOutput.innerText = "";
            gpxOutput.innerText = xmlString;
            console.log(xmlString);
        };
        document.getElementById("gpxExport").addEventListener("click", exportGpx);
     
        chrome.storage.local.get("localTime", function (result) {
            if (result.localTime === true) {
                document.getElementById("localtime").checked = true;
                displayLocal();
            } else {
                document.getElementById("localtime").checked = false;
            }
        });
        reinitializeDisplay();
        var points = background.points[background.currentTab];
     
        function space(value) {
            if (value < 10) {
                value = " " + value;
            }
            return value;
        }
     
        function zero(value) {
            if (value < 10) {
                value = "0" + value;
            }
            return value;
        }
     
        function genIteNext(ttwCurr) {
            var ttwCurr = ttwCurr.match(/.*?([0-9]{1,3}):([0-9]{2})/);
            var ttwHours = parseInt(ttwCurr[1], 10);
            var ttwMinutes = parseInt(ttwCurr[2], 10);
            var ttwNext = [];
            if (ttwMinutes + 10 < 60) {
                ttwNext = "T+" + space(ttwHours) + ":" + zero(ttwMinutes + 10);
            } else {
                ttwNext = "T+" + space(ttwHours + 1) + ":" + zero(ttwMinutes - 50);
            }
            return ttwNext;
        }
     
        for (var i = 0; i < points.length; i++) {
            points[i].atwa = atwaCalc(twaList);
            points[i].abtw = abtwCalc(btwList);
            while (points[i].ttw !== ttwLast) {
                twaList.push(parseInt(twaLast,10));
                btwList.push(parseInt(btwLast,10));
                ttwLast = genIteNext(ttwLast);
            }
            twaLast = parseInt(points[i].twa, 10);
            btwLast = parseInt(points[i].btw, 10);
            if (twaList.length === 0) {
                twaList.push(twaLast);
                btwList.push(btwLast);
            } else if (twaList[0] * twaLast < 0) {
                twaList = [twaLast];
                btwList = [btwLast];
            } else {
                twaList.push(twaLast);
                btwList.push(btwLast);
            }
            ttwLast = genIteNext(ttwLast);
        }
     
        displayTable(false);

    Un dernier coup de pouce ?
    Merci

    EDIT: je me répond à moi même ... dans cette fonction

    Code JS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
        function twsStyling(value1, value2, cell) {
            var tws_foil = value1.replace(" kt", "");
            var twa_bd = value2.replace("\u00B0", "");
            if (tws_foil >= 11.1 && tws_foil <= 39.9 && Math.abs(twa_bd) >= 71 && Math.abs(twa_bd) <= 169) {
                cell.style.backgroundColor = "black";
                cell.style.color = "white";
            } else {
                cell.style.backgroundColor = "white";
                cell.style.color = "black";
            }
            cell.innerHTML = tws_foil + " kt";
        }

    il me suffit de supprimer
    Code JS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
            } else {
                cell.style.backgroundColor = "white";
                cell.style.color = "black";

+ Répondre à la discussion
Cette discussion est résolue.
Page 2 sur 3 PremièrePremière 123 DernièreDernière

Discussions similaires

  1. alignement vertical DIV
    Par madmax54 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 20/11/2008, 18h11
  2. Alignement vertical de div en float
    Par sulletf dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 17/08/2007, 11h39
  3. [div] problème d'alignement vertical
    Par xenos dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 29/11/2006, 12h36
  4. [CSS] alignement vertical d'un texte dans un div
    Par alexfrere dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 06/07/2006, 18h07
  5. [DIV][CSS] Alignement vertical
    Par pmartin8 dans le forum Mise en page CSS
    Réponses: 15
    Dernier message: 02/11/2005, 14h50

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