Come nascondere il bordo per le righe specificate di una tabella?

Question

Voglio nascondere il bordo per una specifica riga di un tavolo. Come fare?
Qualche idea?
Il codice di esempio è molto apprezzato.

Answer 1

Utilizzare il bordo della proprietà CSS su <td> s in seguito allo <tr> se non si desidera avere il bordo.

Nel mio esempio ho creato una classe noBorder che ho assegnato a uno <tr>. Quindi utilizzo un semplice selettore tr.noBorder td per disattivare il bordo per tutti gli <td> s all'interno di <tr> s con la classe noBorder assegnando border: 0.

Nota che non è necessario fornire l'unità (ad esempio px) se si imposta qualcosa su 0 poiché non importa comunque. Zero è solo zero.

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>

ecco l'output come immagine:

Answer 2

Aggiungi classe programmaticamente noborder per riga specifica per nasconderlo

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

Answer 3

Io uso questo con buoni risultati:

border-style:hidden; 

Si lavora anche per:

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

Esempio:

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

Ecco il risultato:

Answer 4

Si può semplicemente aggiungere queste linee di codici qui per nascondere una riga,

O si può scrivere border:0 o border-style:hidden;border: none o accadrà la stessa cosa

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

esecuzione queste linee di codici possono risolvere facilmente il problema