CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
B45i
B45i

Reputation: 2602

Bootstrap is adding extra border to table row

I've written CSS to hide first and last td in a table, but if the page has bootstrap CSS present, it adds an extra border, even when I've border-collapse set to collapse.

The code works fine if there is mo bootstrap CSS loaded to the page.

without bootstrap loaded to the page: enter image description here

with bootstrap CSS:

enter image description here

.action-table {
  border-collapse: collapse;
}

.action-table tr>*:not(:first-child):not(:last-child) {
  border: 5px solid red;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />

  <title>Double Border</title>
</head>

<body>
  <table class="w-100 action-table mt-5">
    <thead>
      <tr class="row align-items-center">
        <th class="col-1 p-3"></th>
        <th class="col-7 p-3">First Name</th>
        <th class="col-3 p-3">Second</th>
        <th class="col-1 p-3"></th>
      </tr>
    </thead>
    <tbody>
      <tr class="row align-items-center">
        <td class="text-right col-1 p-3"><i class="fa fa-bars cursor-grab"></i></td>
        <td class="col-7 p-3">Mark</td>
        <td class="col-3 p-3">Otto</td>
        <td class="col-1 p-3"><i class="fa fa-times"></i></td>
      </tr>
      <tr class="row align-items-center">
        <td class="text-right col-1 p-3"><i class="fa fa-bars cursor-grab"></i></td>
        <td class="col-7 p-3">Mark</td>
        <td class="col-3 p-3">Otto</td>
        <td class="col-1 p-3"><i class="fa fa-times"></i></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Upvotes: 0

Views: 1137

Answers (2)

Amir Naeem
Amir Naeem

Reputation: 610

Little late for the party.

You can also fix this issue using just the margin property.

.action-table {
  border-collapse: collapse;
}

.action-table tr>*:not(:first-child):not(:last-child) {
  border: 5px solid red;
  margin: -5px 0 0 -5px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />

  <title>Double Border</title>
</head>

<body>
  <table class="w-100 action-table mt-5">
    <thead>
      <tr class="row align-items-center">
        <th class="col-1 p-3"></th>
        <th class="col-7 p-3">First Name</th>
        <th class="col-3 p-3">Second</th>
        <th class="col-1 p-3"></th>
      </tr>
    </thead>
    <tbody>
      <tr class="row align-items-center">
        <td class="text-right col-1 p-3"><i class="fa fa-bars cursor-grab"></i></td>
        <td class="col-7 p-3">Mark</td>
        <td class="col-3 p-3">Otto</td>
        <td class="col-1 p-3"><i class="fa fa-times"></i></td>
      </tr>
      <tr class="row align-items-center">
        <td class="text-right col-1 p-3"><i class="fa fa-bars cursor-grab"></i></td>
        <td class="col-7 p-3">Mark</td>
        <td class="col-3 p-3">Otto</td>
        <td class="col-1 p-3"><i class="fa fa-times"></i></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Upvotes: 0

MaxiGui
MaxiGui

Reputation: 6348

The border are doing what you are telling them it is adding a 5px on all td which are not the first or last.

So I adjust your css to make as I expected:

.action-table tr>*:not(:first-child):not(:last-child) {
  border: 5px solid red;
  border-bottom: none;
  border-left: none;
}
.action-table tr > *:nth-child(2){
  border-left:  5px solid red !important; /** !important needed **/
}

.action-table tbody tr:last-child>*:not(:first-child):not(:last-child){
  border-bottom:  5px solid red;
}

DEMO

.action-table {
  border-collapse: collapse;
}

.action-table tr>*:not(:first-child):not(:last-child) {
  border: 5px solid red;
  border-bottom: none;
  border-left: none;
}
.action-table tr > *:nth-child(2){
  border-left:  5px solid red !important;
}

.action-table tbody tr:last-child>*:not(:first-child):not(:last-child){
  border-bottom:  5px solid red;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />

  <title>Double Border</title>
</head>

<body>
  <table class="w-100 action-table mt-5">
    <thead>
      <tr class="row align-items-center">
        <th class="col-1 p-3"></th>
        <th class="col-7 p-3">First Name</th>
        <th class="col-3 p-3">Second</th>
        <th class="col-1 p-3"></th>
      </tr>
    </thead>
    <tbody>
      <tr class="row align-items-center">
        <td class="text-right col-1 p-3"><i class="fa fa-bars cursor-grab"></i></td>
        <td class="col-7 p-3">Mark</td>
        <td class="col-3 p-3">Otto</td>
        <td class="col-1 p-3"><i class="fa fa-times"></i></td>
      </tr>
      <tr class="row align-items-center">
        <td class="text-right col-1 p-3"><i class="fa fa-bars cursor-grab"></i></td>
        <td class="col-7 p-3">Mark</td>
        <td class="col-3 p-3">Otto</td>
        <td class="col-1 p-3"><i class="fa fa-times"></i></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Upvotes: 1

Related Questions