<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"> </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>
填充在tbody中不起作用所以我在伪元素之前和之后使用它来添加空间。在这个空间我需要删除边框。
答案 0 :(得分：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;
}
答案 1 :(得分：0)
我创建了用于删除特定单元格边框的demo。 Demo Table Link
<强> CSS
tr:nth-child(5) td:nth-child(2) {
border-right: hidden;
}