Table outline border and column border only in Bootstrap - html

Question

I want a table like below, only the outline_border (?) and column border to be in the table, but when I try there is a dark fade border in my rows:
How I achieve so far:
How can I get a table with outline border and column border, but not in a row. I used bootstrap CSS.
If i used table class table-borderless the rows line and all lines were gone except the outline-border, but I want column border to be in the table
I try like this questions
Please play it below here:
table {
border:1px solid black;
border-collapse: collapse;
}
table tr {
border-left: 1px solid #000;
border-right: 1px solid #000;
}
table td {
border-left: 1px solid #000;
border-right: 1px solid #000;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<table class="table table-small">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
</tbody>
</table>

Answer 1

The problem is that bootstrap overwrites part of your definitions. To avoid this, you can make certain CSS !important.
EDIT: Horizontal lines between table cells removed.
.table {
border: 1px solid black;
}
.table thead th {
border-top: 1px solid #000!important;
border-bottom: 1px solid #000!important;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.table td {
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top: none!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<table class="table table-small">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
</tbody>
</table>

Answer 2

My question for the above comment is, I can achieve what I want like below, but I have to use inline CSS everywhere. Is there any better approach to work with, not just inline CSS
.table {
border: 1px solid black;
}
.table thead th {
border-top: 1px solid #000!important;
border-bottom: 1px solid #000!important;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.table td {
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top: none!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<table class="table table-small">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>sub-total</td>
<td style="border-bottom: 1px solid #000;border-top: 1px solid #000!important;">123</td>
<td style="border-bottom: 1px solid #000;border-top: 1px solid #000!important">456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr style="border-top: 1px solid #000!important">
<td>##</td>
<td>Total</td>
<td>xyz</td>
<td>abc</td>
</tr>
</tbody>
</table>

Answer 3

Only this can done by adding these styles in our head tag
.invoice-table {
border: 1px solid black;
}
.invoice-table thead th {
border: 1px solid #000!important;
}
.invoice-table td {
border: 1px solid #000;
}
Import: to have line for each tr we can simple add to
<tr style="border-top: 1px solid #000!important">