CSS: no top,right and bottom border on a table cells - html

Question

I am trying to get a table with the last column cells (and header) having nor right, top and bottom border. I have searched Sobut i am unable to make what I found work,
This fiddle shows what I have tried: 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;
}
Where is my error ? thanks for any pointer

Answer 1

You have a border set on the whole table so even with this removed from the th and td the border will still appear.
Also as a side note, you can do away with the extra classes to remove the border by using :last-child and omit the !important.
Ive edited your CSS below.
.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 2

Use hidden instead of 0, for example:
border-top:hidden !important;
border-right:hidden !important;
border-bottom:hidden !important;

Answer 3

remove border to table
.asktable {
/*border: 1px solid #ccc;*/
border-collapse: collapse;
}
https://jsfiddle.net/taqge61v/8/

Answer 4

You should use border-xxx-color:transparent; where you want no border. It will helps you.
.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>