web-dev-qa-db-fra.com

Comment masquer la bordure pour des lignes spécifiques d'un tableau?

Je veux masquer la bordure pour une ligne spécifique d'un tableau.Comment le faire?
Une idée?
Le code exemple est hautement apprécié.

htmlcsshtml-tableborder
23
Mr.Chowdary

Utilisez la bordure de la propriété CSS sur le <td>s suivant le <tr>s pour lequel vous ne voulez pas avoir la bordure. 

Dans mon exemple, j'ai créé une classe noBorder que j'ai donnée à un <tr>. Ensuite, j'utilise un simple sélecteur tr.noBorder td pour faire disparaître la bordure de tous les <td>s situés à l'intérieur de <tr>s avec la classe noBorder en affectant border: 0. 

Notez qu'il n'est pas nécessaire de fournir l'unité (c'est-à-dire px) si vous définissez quelque chose sur 0 car cela n'a pas d'importance de toute façon. Zéro est juste zéro.

table, tr, td {
  border: 3px solid red;
}
tr.noBorder td {
  border: 0;
}
<table>
  <tr>
    <td>A1</td>
    <td>B1</td>
    <td>C1</td>
  </tr>
  <tr class="noBorder">
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
  </tr>
  <tr>
    <td>A3</td>
    <td>A3</td>
    <td>A3</td>
  </tr>
</table>

Voici la sortie sous forme d'image:

Output from HTML

36
simbabque

Je l'utilise avec de bons résultats:

border-style:hidden;

Cela fonctionne aussi pour:

border-right-style:hidden; /*if you want to hide just a border on a cell*/

Exemple:

<style type="text/css">
      table, th, td {
       border: 2px solid green;
      }
      tr.hide_right > td, td.hide_right{
        border-right-style:hidden;
      }
      tr.hide_all > td, td.hide_all{
        border-style:hidden;
      }
  }
</style>
<table>
  <tr>
    <td class="hide_right">11</td>
    <td>12</td>
    <td class="hide_all">13</td>
  </tr>
  <tr class="hide_right">
    <td>21</td>
    <td>22</td>
    <td>23</td>
  </tr>
  <tr class="hide_all">
    <td>31</td>
    <td>32</td>
    <td>33</td>
  </tr>
</table>

Voici le résultat:  enter image description here

11
Carlos Toledo

Vous pouvez simplement ajouter ces lignes de codes ici pour masquer une ligne,

Soit vous pouvez écrire border:0 ou border-style:hidden;border: none ou il se passera la même chose

<style type="text/css">
              table, th, td {
               border: 1px solid;
              }
              
              tr.hide_all > td, td.hide_all{
                 border: 0;
                
              }
          }
        </style>
    <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>Peter</td>
        <td>Griffin</td>
        <td>$100</td>
      </tr>
      <tr class= hide_all>
        <td>Lois</td>
        <td>Griffin</td>
        <td>$150</td>
      </tr>
      <tr>
        <td>Joe</td>
        <td>Swanson</td>
        <td>$300</td>
      </tr>
      <tr>
        <td>Cleveland</td>
        <td>Brown</td>
        <td>$250</td>
      </tr>
    </table>

l'exécution de ces lignes de codes peut résoudre le problème facilement

1
Pronab Roy

Ajouter par programme la classe noborder à une ligne spécifique pour la masquer

<style>
     .noborder
      {
        border:none;
      }
    </style>

<table>

    <tr>
       <th>heading1</th>
       <th>heading2</th>
    </tr>


    <tr>
       <td>content1</td>
       <td>content2</td>
    </tr>
    /*no border for this row */
    <tr class="noborder">
       <td>content1</td>
       <td>content2</td>
    </tr>

</table>
0
vikrantx