[ANSWERED] html – Bootstrap border of td element problem with colspan

Question 1

Really good question. I’ve tested it it different ways and looks like it is some bug of table. This happens only when previous element has colspan="2" combined with table {border-collapse: collapse;} which is added by Bootstrap actually.

Here is more stable solution using display: grid;

More about grid and grid-area.

.table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
}

.table>div {
  background-color: #ead6a4;
  border: 1px solid #e09c37;
}

.table #head-cell {
  grid-area: 1 / 1 / 2 / 3; /* like a colspan, but better */
  background-color: #e09c37;
  background: linear-gradient(90deg, #e09c37 25%, #fff 85%);
  border: 1px solid #e09c37;
}

.table>div.current {
  padding: 0rem;
  border: 6px solid #ff0000 !important;
  border-collapse: collapse;
}

<div class="table">
  <div id="head-cell">HEAD</div>
  <div id="pen-cell-1" class="current">1</div>
  <div id="pen-cell-2">2</div>
</div>

UPDATED

Using Bootstrap cols

.table>div {
  background-color: #ead6a4;
  border: 1px solid #e09c37;
}

.table #head-cell {
  background-color: #e09c37;
  background: linear-gradient(90deg, #e09c37 25%, #fff 85%);
  border: 1px solid #e09c37;
}

.table>div.current {
  border: 6px solid #ff0000 !important;
  border-collapse: collapse;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row table">
    <div class="col-12" id="head-cell">HEAD</div>
    <div class="col-6 current" id="pen-cell-1">1</div>
    <div class="col-6" id="pen-cell-2">2</div>
  </div>
</div>

Question 2

I put a solid red border in the first td but I see that border olso on border-top of others td.

HTML -> a simple table with a head row with colspan 2 and a row in body with 2 columns:

<table class="table ">
  <thead>
    <tr>
      <th class="pen-cell" colspan="2">HEAD</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="pen-cell current" id="pen-cell-1">1</td>
      <td class="pen-cell" id="pen-cell-2">2</td>
    </tr>
  </tbody>
</table>

CSS -> color for head and body, red border for “current” cell:

table td.pen-cell {
  background-color: #ead6a4;
  border: 1px solid #e09c37;
}
.table thead th.pen-cell {
  background-color: #e09c37;
  background: linear-gradient(90deg, #e09c37 25%, #fff 85%);
  border: 1px solid #e09c37;
}
td.current {
  padding: 0rem;
  border: 6px solid #ff0000 !important;
}

the problem is that the red border is present also on border-top of the second cell.

live version: https://codepen.io/Migio/pen/ExPoJwj

Bollate

[ANSWERED] html – Bootstrap border of td element problem with colspan

By

Solution 1 :

Problem :

Comments

Comment posted by Johannes

Comment posted by Migio B

Comment posted by focus.style

By

Related Post

[ANSWERED] html – Move list item to the left in header/navigation menu

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

[ANSWERED] html – Child div has an offset border

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate