I want to hide the border for a specific rows of a table.How to do it?
Any Idea?
Sample code is Highly Appreciated.
This question is related to
html
css
html-table
border
The answer is
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.
_x000D_
_x000D_
_x000D_
_x000D_
table, tr, td {_x000D_
border: 3px solid red;_x000D_
}_x000D_
tr.noBorder td {_x000D_
border: 0;_x000D_
}<table>_x000D_
<tr>_x000D_
<td>A1</td>_x000D_
<td>B1</td>_x000D_
<td>C1</td>_x000D_
</tr>_x000D_
<tr class="noBorder">_x000D_
<td>A2</td>_x000D_
<td>B2</td>_x000D_
<td>C2</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>A3</td>_x000D_
<td>A3</td>_x000D_
<td>A3</td>_x000D_
</tr>_x000D_
</table>Here's the output as an image:
You can simply add these lines of codes here to hide a row,
Either you can write border:0 or border-style:hidden; border: none or it will happen the same thing
_x000D_
_x000D_
_x000D_
_x000D_
<style type="text/css">_x000D_
table, th, td {_x000D_
border: 1px solid;_x000D_
}_x000D_
_x000D_
tr.hide_all > td, td.hide_all{_x000D_
border: 0;_x000D_
_x000D_
}_x000D_
}_x000D_
</style>_x000D_
<table>_x000D_
<tr>_x000D_
<th>Firstname</th>_x000D_
<th>Lastname</th>_x000D_
<th>Savings</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Peter</td>_x000D_
<td>Griffin</td>_x000D_
<td>$100</td>_x000D_
</tr>_x000D_
<tr class= hide_all>_x000D_
<td>Lois</td>_x000D_
<td>Griffin</td>_x000D_
<td>$150</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Joe</td>_x000D_
<td>Swanson</td>_x000D_
<td>$300</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Cleveland</td>_x000D_
<td>Brown</td>_x000D_
<td>$250</td>_x000D_
</tr>_x000D_
</table>running these lines of codes can solve the problem easily
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:
_x000D_
_x000D_
_x000D_
_x000D_
<style type="text/css">_x000D_
table, th, td {_x000D_
border: 2px solid green;_x000D_
}_x000D_
tr.hide_right > td, td.hide_right{_x000D_
border-right-style:hidden;_x000D_
}_x000D_
tr.hide_all > td, td.hide_all{_x000D_
border-style:hidden;_x000D_
}_x000D_
}_x000D_
</style>_x000D_
<table>_x000D_
<tr>_x000D_
<td class="hide_right">11</td>_x000D_
<td>12</td>_x000D_
<td class="hide_all">13</td>_x000D_
</tr>_x000D_
<tr class="hide_right">_x000D_
<td>21</td>_x000D_
<td>22</td>_x000D_
<td>23</td>_x000D_
</tr>_x000D_
<tr class="hide_all">_x000D_
<td>31</td>_x000D_
<td>32</td>_x000D_
<td>33</td>_x000D_
</tr>_x000D_
</table>Here is the result:
Add programatically noborder class to specific row to hide it
<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>
Source: Stackoverflow.com