The
<colgroup>tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
I applied colgroup to my table by adding
<colgroup> <col span="6" style="border-right: 1px solid #b7b7b7"> </colgroup> below <table> tag. So now all the cells have right border in all rows but I need to delete border in specific cell. How can I do that ?
.details-map:before{ content: ''; display: block; height: 70px; } .details-map:after{ content: ''; display: block; height: 50px; } .noborder{ border-right: 1px solid transparent; border-bottom: 1px solid transparent; } .noborderall{ border-right: 1px solid transparent; border-left: 1px solid transparent; } .noborderr{ border-right: 1px solid transparent; } <table class="table"> <colgroup> <col span="6" style="border-right: 2px solid red"> </colgroup> <thead> <tr> <th width="5.4%">Rank</th> <th width="27.3%">School</th> <th width="12.5%">Student to Faculty Ratio</th> <th width="12.5%">Acceptance Rate</th> <th width="11.3%">Graduation Rate</th> <th width="12.3%">Median Debt Incurred</th> <th width="31.2%">Median Earnings/Total Expense</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Lorem Ipsum Dolor</td> <td>XX/1</td> <td>XX%</td> <td>XX%</td> <td>$XX,XXX</td> <td>$XX,XXX/$XX,XXX</td> </tr> <tr> <th scope="row">2</th> <td>Lorem Ipsum Dolor</td> <td>XX/1</td> <td>XX%</td> <td>XX%</td> <td>$XX,XXX</td> <td>$XX,XXX/$XX,XXX</td> </tr> </tbody> <tbody class="details-map"> <tr> <th scope="row" class="noborder"> </th> <th scope="row" >Lorem Ipsum Dolor</th> <th scope="row" class="noborderall"> </th> <th scope="row" class="noborderr"> </th> <td colspan="3" rowspan="7"> <button class="buttons">School website</button> <button class="buttons">Financial Aid Office</button> <button class="buttons">Prospecitve students</button> <div id="googleMap"></div> </td> </tr> <tr> <td scope="row" class="noborder"> </td> <td scope="row" >Expense Ratio</td> <td scope="row" class="noborderall"> </td> <td scope="row" class="noborderr right-align">XX/10</td> </tr> <tr> <td scope="row" class="noborder"> </td> <td scope="row" >Acceptance Rate Score</td> <td scope="row" class="noborderall"> </td> <td scope="row" class="noborderr right-align">XX/10</td> </tr> <tr> <td scope="row" class="noborder"> </td> <td scope="row" class="left-align">Graduation Rate Score</td> <td scope="row" class="noborderall"> </td> <td scope="row" class="noborderr right-align">XX/10</td> </tr> <tr> <td scope="row" class="noborder"> </td> <td scope="row" class="left-align">ROI/Value</td> <td scope="row" class="noborderall"> </td> <td scope="row" class="noborderr right-align">XX/10</td> </tr> <tr> <td scope="row" class="noborder"> </td> <td scope="row" >Student to Faculty Ratio</td> <td scope="row" class="noborderall"> </td> <td scope="row" class="noborderr right-align">XX/10</td> </tr> <tr> <td colspan="4" scope="row" class="noborderr" > <h2>About the scores</h2> <p> Using a complex algorithm our review tool examines all of the schools in Pennsylvania that offer Computer Science Majors and provides a score for several categories. </p> </td> </tr> </tbody> <tbody> <tr> <th scope="row">3</th> <td>Lorem Ipsum Dolor</td> <td>XX/1</td> <td>XX%</td> <td>XX%</td> <td>$XX,XXX</td> <td>$XX,XXX/$XX,XXX</td> </tr> </tbody> </table>Padding doesn't work in tbody so I used before and after pseudo elements to add space. In this space I need to delete the border.
<div>or two.