How can I remove the thick line from the table header row bottom

Question

I just follow the example for creating a table with the bootstrap Table element.

Here is my StackBlitz, I wonder why a thick black line exists at the bottom of the table header.

However, the example site does not have a thick black line exists at the bottom of the table header.

Is there something wrong? is it possible to remove the thick black line from the bottom of the table header?

Answer 1

It is border assigned by bootstrap when you use Table group dividers. See Bootstrap docs for more details.

To get remove it add borderTop: 'none' to tbody. So updated component looks like below

import React from 'react';
import Table from 'react-bootstrap/Table';
export default function App() {
  return (
    <div className="m-4">
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody style={{ borderTop: 'none' }}>
          <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 colSpan={2}>Larry the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </Table>
    </div>
  );
}

Stackblitz Reproduction: https://react-ue5ckm.stackblitz.io