Check out this example:
I am trying to make the red border-bottom display as one solid line, but currently the yellow border is breaking it up into three parts. Is there a way for the border-bottom to take precedence? Perhaps using something like z-index?
I have experimented with both border-collapse: collapse and border-collapse: separate.
The only solution I found was to increase the thickness of the red line, but I want it to remain the same width.
table {
width:100%;
border:1px solid blue;
border-collapse: separate;
}
th, td {
border:1px solid yellow;
padding:5px;
}
th {
background:black;
color:white;
}
th {
border-bottom:1px solid red !important;
}
td {
background:#efefef;
}