¿Cómo ocultar el borde de las filas especificadas de una tabla?

Question

Quiero ocultar el borde de las filas específicas de una tabla. ¿Cómo hacerlo?
¿Alguna idea?
El código de muestra es muy apreciado.

Answer 1

Utilice el borde de la propiedad CSS en el <td> s después de <tr> s no desea tener el borde.

En mi ejemplo hice una clase noBorder que di a una <tr>. Luego utilizo un selector simple tr.noBorder td para hacer que el borde desaparezca para todos los <td> s que están dentro de <tr> s con la clase noBorder asignando border: 0.

Tenga en cuenta que no es necesario que proporcione la unidad (es decir, px) si establece algo en 0, ya que no importa de todos modos. Zero es solo cero.

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>

Aquí está la salida como una imagen:

Answer 2

Agregar clase programáticamente noborder a fila específica para ocultarlo

<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

yo uso esto con buenos resultados:

border-style:hidden; 

También funciona para:

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

Ejemplo:

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

aquí está el resultado:

Answer 4

Usted puede simplemente añadir estas líneas de códigos aquí para ocultar una fila,

O se puede escribir border:0 o border-style:hidden;border: none o que va a pasar lo mismo

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

consecutivo estas líneas de códigos pueden resolver el problema fácilmente