CSS：表格单元格上没有顶部，右侧和底部边框

Question

我正在尝试获取一个表，其中最后一列单元格（和标题）具有右边，顶部和底部边框。我搜索了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;
}

我的错误在哪里？感谢任何指针

Answer 1

使用隐藏而不是0，例如：

  border-top:hidden !important;
  border-right:hidden !important;
  border-bottom:hidden !important;

Answer 2

您在整个表格上设置了边框，因此即使从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>

Answer 3

您应该在不需要边框的情况下使用border-xxx-color:transparent;。它会帮助你。

.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-color:transparent !important;
  border-right-color:transparent !important;
  border-bottom-color:transparent !important;
}*/

.asktable .no-border-right{
  border-top-color:transparent !important;
  border-right-color:transparent !important;
  border-bottom-color:transparent !important;
}

<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>

Answer 4

删除table的边框

.asktable {
    /*border: 1px solid #ccc;*/
    border-collapse: collapse;
}

https://jsfiddle.net/taqge61v/8/