删除表格中的特定单元格边框

Question

<colgroup>标记对于将样式应用于整个列很有用，而不是为每一行的每个单元格重复样式。

我通过添加colgroup到我的表

<colgroup>
  <col span="6" style="border-right: 1px solid #b7b7b7">
</colgroup>

在<table>标签下面。 所以现在所有单元格在所有行中都有右边框，但是我需要删除特定单元格中的边框。 我怎样才能做到这一点 ？

  .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">&nbsp;</th> <th scope="row" >Lorem Ipsum Dolor</th> <th scope="row" class="noborderall">&nbsp;</th> <th scope="row" class="noborderr">&nbsp;</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">&nbsp;</td> <td scope="row" >Expense Ratio</td> <td scope="row" class="noborderall">&nbsp;</td> <td scope="row" class="noborderr right-align">XX/10</td> </tr> <tr> <td scope="row" class="noborder">&nbsp;</td> <td scope="row" >Acceptance Rate Score</td> <td scope="row" class="noborderall">&nbsp;</td> <td scope="row" class="noborderr right-align">XX/10</td> </tr> <tr> <td scope="row" class="noborder">&nbsp;</td> <td scope="row" class="left-align">Graduation Rate Score</td> <td scope="row" class="noborderall">&nbsp;</td> <td scope="row" class="noborderr right-align">XX/10</td> </tr> <tr> <td scope="row" class="noborder">&nbsp;</td> <td scope="row" class="left-align">ROI/Value</td> <td scope="row" class="noborderall">&nbsp;</td> <td scope="row" class="noborderr right-align">XX/10</td> </tr> <tr> <td scope="row" class="noborder">&nbsp;</td> <td scope="row" >Student to Faculty Ratio</td> <td scope="row" class="noborderall">&nbsp;</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> 

填充在tbody不起作用，因此我在伪元素之前和之后使用了添加空间。 在此空间中，我需要删除边框。

Answer 1

您可以为您选择的col提供一个ID或类 （不应该带有边框）并向其添加border：none属性

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

我已经创建了删除特定单元格边框的演示。 演示表链接

的CSS

tr:nth-child(5) td:nth-child(2) {
  border-right: hidden;
}