Граница таблицы и граница столбца только в Bootstrap

Question

Я хочу, чтобы таблица, как показано ниже, только outline_border (?) И column border была в таблице, но когда я пытаюсь, в моих строках появляется темная граница затухания:

How I achieve so far:

Как получить таблицу с контурной границей и границей столбца, но не в строке. Я использовал загрузчик CSS.

Если я использовал табличный класс table-borderless, строка строк и все строки исчезли, кроме outline-border, но я хочу, чтобы граница столбца была в таблице

Я пытаюсь, как это вопросы

Пожалуйста, играйте здесь ниже:

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

У меня вопрос к приведенному выше комментарию: я могу добиться того, что хочу ниже, но я должен везде использовать встроенный CSS. Есть ли лучший подход для работы, а не только встроенный 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 2

Проблема в том, что bootstrap перезаписывает часть ваших определений. Чтобы избежать этого, вы можете сделать определенные CSS !important.

РЕДАКТИРОВАТЬ : Горизонтальные линии между ячейками таблицы удалены.

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