CSS：表格单元格上无上下边框

Pat070 发表于 Dev

帕特070

我正在尝试使用最后一列单元格（和标题）也没有右，上，下边框的表格。我搜索了Sobut，但我无法使发现的工作有效，

这个小提琴显示了我尝试过的内容：https : //jsfiddle.net/prtome/taqge61v/

的HTML

<table class="asktable">
<thead>
<th> col1</th>
<th> col1</th>
<th class="no-border-right"> col no border</th>
</thead>
<tbody><td>a</td><td>b</td><td>cell no border</td></tbody>
</table>

的CSS

.asktable {
  border-collapse: collapse;
  border: 1px solid #ccc; 
}
.asktable th {
  padding: 4px 8px;
  border: 1px solid #ccc;
}
.asktable td {
  padding: 4px 8px;
  border: 1px solid #ccc;
}
.asktable th.no-border-right{
  border-top:0;
  border-right:0 !important;
  border-bottom:0;
}

我的错误在哪里？谢谢你的指导

亚伦

你对整个表边框一套所以即使从这个删除th和td边境仍将出现。

另外请注意，您可以使用:last-child和忽略来消除多余的类来删除边框!important。

我已经在下面编辑了CSS。

.asktable {
  border-collapse: collapse;
}
.asktable th {
  padding: 4px 8px;
  border: 1px solid #ccc;
}
.asktable td {
  padding: 4px 8px;
  border: 1px solid #ccc;
}
.asktable th:last-child,
.asktable td:last-child {
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
}

<table class="asktable">
  <thead>
    <th>col1</th>
    <th>col1</th>
    <th class="no-border-right">col no border</th>
  </thead>
  <tbody>
    <td>a</td>
    <td>b</td>
    <td>cell no border</td>
  </tbody>
</table>
<p>
  <br>
</p>

<table class="asktable no-border-right">
  <thead>
    <th>col1</th>
    <th>col1</th>
    <th class="no-border-right">col no border</th>
  </thead>
  <tbody>
    <td>a</td>
    <td>b</td>
    <td>ccell no border</td>
  </tbody>
</table>