I want to hide the border for a specific rows of a table.How to do it?
Any Idea?
Sample code is Highly Appreciated.
- 4You have a lot of questions without an accepted answer. Please go back through your questions and accept answers that helped you. Also, do show what you have tried.simbabque– simbabque2012-07-17 07:09:14 +00:00Commented Jul 17, 2012 at 7:09
- 1and then google your problems first...Jamie Hutber– Jamie Hutber2012-07-24 16:13:35 +00:00Commented Jul 24, 2012 at 16:13
Add a comment |
5 Answers
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:
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: 
Comments
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> 
Comments
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
<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>running these lines of codes can solve the problem easily
Comments
I got it to work in the end, by hiding all borders of the table, and making a cell-class with borders. All Cells get the class with borders. Except the ones in the Rows that should be displayed without borders.
