Auteur Sujet: HTML5 : Tableau et classes de style (CSS)  (Lu 4007 fois)

0 Membres et 1 Invité sur ce sujet

vivien

  • Administrateur
  • *
  • Messages: 47 217
    • Twitter LaFibre.info
HTML5 : Tableau et classes de style (CSS)
« le: 04 août 2015 à 12:28:47 »
J'ai une petite question concernant CSS

Pour la page https://iperf.fr/iperf-doc.html#doc j'ai deux types de tableaux :

- La classe "bordurenulle" pour un tableau avec des bordures entièrement invisible => Cela permet d'afficher les liens à droite du logo iperf
- La classe "tableau" pour un tableau classique (la doc d'iperf2 qui est en dessous)

J'aimerais bien que certaines lignes de la classe "tableau" soit invisibles (border 0) afin de séparer "SERVER SPECIFIC OPTIONS" et "CLIENT SPECIFIC OPTIONS"
J'ai essayé <td class="bordurenulle" colspan="3"></td> sans sucés (la bordure reste affichée)

Ma question : Est-il possible de modifier la bordure pour une cellule sans devoir mettre toutes les autres cellules dans une autre classe CSS ?

Le partie de iperf-doc.html qui nous intéresse :
<h2 id="doc">iPerf 2 user documentation</h2>

<table class="bordurenulle">
  <tbody>
  <tr>
    <td><img src="images/logo_iperf_command.png" alt="iPerf" /></td>
    <td><img src="images/white.png" alt="" /></td>
    <td>
      <a href="#tuningtcp">Tuning a TCP connection</a><br /><br />
      <a href="#tuningudp">Tuning a UDP connection</a><br /><br />
      [...]
    </td>
  </tr>
  </tbody>
</table>

<table class="tableau">
  <tbody>
  <tr>
    <th colspan="3">GENERAL OPTIONS</th></tr>
  <tr>
    <th>Command line option</th>
    <th>Environment variable option</th>
    <th>Description</th></tr>
[...]
  <tr>
    <td class="bordurenulle" colspan="3"></td></tr>
  <tr>
    <th colspan="3">SERVER SPECIFIC OPTIONS</th></tr>
  <tr>
    <th>Command line option</th>
    <th>Environment variable option</th>
    <th>Description</th></tr>
  <tr>
    <td id="server"><strong>-s</strong>, --server</td>
    <td>$IPERF_SERVER</td>
    <td>Run iPerf in server mode. (iPerf2 can handle multiple client requests)</td></tr>

La partie de default.css qui nous intéresse :
table {
    border-collapse: collapse;
}

table.tableau td {
    vertical-align: top;
}
table.tableau th {
    background-color: #cccccc;
}
table.tableau th, td {
    border: 1px solid gray;
}

table.bordurenulle td {
    vertical-align: top;
    border: 0px;
}

Le but est de supprimer la petite bordure que j'ai entouré en rouge qui montre que c'est un unique tableau. (Si je fais 3 tableau différents, les colonnes ne se superposent pas, c'est moche)

Marin

  • Client Bbox vdsl
  • Modérateur
  • *
  • Messages: 2 804
  • 73
HTML5 : Tableau et classes de style (CSS)
« Réponse #1 le: 04 août 2015 à 12:36:46 »
Salut,

Ça ne marche pas car tu utilises le mauvais sélecteur.

Remplace :
table.bordurenulle td {
Par :
table td.bordurenulle {
Et normalement ça roule.

vivien

  • Administrateur
  • *
  • Messages: 47 217
    • Twitter LaFibre.info
HTML5 : Tableau et classes de style (CSS)
« Réponse #2 le: 04 août 2015 à 13:45:05 »
Merci Marin, cela fonctionne parfaitement.

C'est plus propre comme ça.

Le rajout d'une ligne dans le code HTML :
  <tr>
    <td class="lignevide" colspan="3"></td>
  </tr>

Note : colspan="3" (remplacer 3 par le nombre de colonnes) est nécessaire pour ne pas avoir de warning lors de la validation du code par https://validator.w3.org/

La partie coté CSS :
table td.lignevide {
    border: 0px;
    height: 14px;
}