Remove specific cell border in table - html

Question

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.

Answer 1

you can give an id or class to your choice of col (which should not have border) and add the border:none property to it
HTML :
<colgroup>
<col span="6" style="border-right: 1px solid #b7b7b7">
<col span="6" style="border-right: 1px solid #b7b7b7">
<col span="6" style="border-right: 1px solid #b7b7b7">
<col span="6" class="tb" style="border-right: 1px solid #b7b7b7">
</colgroup>
CSS :
.tb{
border:none;
}

Answer 2

I have created demo for remove specific cell border.
Demo Table Link
CSS
tr:nth-child(5) td:nth-child(2) {
border-right: hidden;
}