How to have borders for only columns in Bootstrap table and not for rows?-CodePudding

What I have tried so far is added th and tfoot. After that I tried to apply border right and left for only td, If I try to apply border top and bottom for table, border is not being applied for table bottom. And also the border thickness or colour is being different when compared to 1st and last column

Below is the code snippet which I have tried

.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!important;
  border-right: 1px solid #000!important;
}

.table td {
  border-left: 1px solid #000!important;
  border-right: 1px solid #000!important;
  border-top: none!important;
}

tbody>tr:nth-child(odd) {
  background: #F8F8F8
}

tfoot>tr:nth-child(odd),
thead {
  background: #E3ECFC
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

  <div >
    <table >
      <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>
      <tfoot>
        <tr>
          <td>4</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <td>5</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
      </tfoot>
    </table>
</body>

</html>

Expected output

CodePudding user response：

added tfoot>tr:last-of-type and thead>tr:first-of-type

tfoot>tr:nth-child(odd),
thead {
  background: #E3ECFC
}

tr>td,
tr>th {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

thead>tr:first-of-type {
  border-top: 1px solid #000;
}

tfoot>tr:last-of-type {
  border-bottom: 1px solid #000;
  height:150px /* change here */
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

  <div >
    <table >
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Handle</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th scope="row">4</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">5</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
      </tfoot>
    </table>
</body>

</html>