Bootstrap border of td element problem with colspan

Question

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:

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

user_3187127 · Answer

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;
}


  HEAD
  1
  2

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;
}

Bootstrap border of td element problem with colspan

1 Answers