CODEWITHSUNDEEP
javascriptcsshtml-tablebootstrap-4
jakobdo
jakobdo

Reputation: 1302

Add border when hover over a cell in bootstrap table with table-border

i have a table like this example: https://jsfiddle.net/nmw82od1/
And i have this css:

.table1 td:hover {
  border: 1px solid black;
}

.table2 td:hover {
  border: 1px double black;
}

I want a border in every td, when i hover a td.
If i use double, it works in all other cells, than the row in the top.

Anyone got a good solution to get border work as expected?

Upvotes: 2

Views: 861

Answers (1)

Akber Iqbal
Akber Iqbal

Reputation: 15031

The issue you face is due to display property table-cell which is added by bootstrap. to resolve, use display:block. Working snippet below:

UPDATE: minor padding added to resolve the jumping effect...

.table1 td:hover {
  border: 1px solid black;
  padding: 11px 11px;
  display: block;
}

.table2 td:hover {
  border: 1px double black;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <table class="table1 table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Donald</td>
        <td>Duck</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Daisy</td>
        <td>Duck</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Scrooge</td>
        <td>McDuck</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Gladstone</td>
        <td>Gander</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="container">
  <table class="table2 table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Donald</td>
        <td>Duck</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Daisy</td>
        <td>Duck</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Scrooge</td>
        <td>McDuck</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Gladstone</td>
        <td>Gander</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 1

Related Questions