How to hide the border for specified rows of a table?

Question

I want to hide the border for a specific rows of a table.How to do it?
Any Idea?
Sample code is Highly Appreciated.

Answer 1

Use the CSS property border on the <td>s following the <tr>s you do not want to have the border.

In my example I made a class noBorder that I gave to one <tr>. Then I use a simple selector tr.noBorder td to make the border go away for all the <td>s that are inside of <tr>s with the noBorder class by assigning border: 0.

Note that you do not need to provide the unit (i.e. px) if you set something to 0 as it does not matter anyway. Zero is just 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>

Here's the output as an image:

Answer 2

I use this with good results:

border-style:hidden; 

It also works for:

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

Example:

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

Here is the result: