Table Border Color in CSS with Border Collapse

Table border color in CSS with border collapse

This is a defined behavior of border-collapse. Page 357 of the O'Reilly CSS Definitive Guide 3rd Edition says:

if collapsing borders have the same style and width, but differ in color, then ... from most to least preferred: cell, row, row group, column, column group, table.
if ... come from same type of element, such as two rows... then color is taken from borders that are the topmost and the leftmost.

So the topmost, which is red, wins out.

One way to override this may be to use cell for the color to win over the color for the row.

example: http://jsfiddle.net/Chapm/

The rules that have higher precedence than this "same color rule is"

wider border wins over narrower ones

and after that,

double wins over solid, then dashed, dotted, ridge, outset, groove, inset

You can use 2px for the gold for it to win over, and I tried in Chrome to use 1px but double, and it appears as 1px solid and it will win over the red as well. Although if you want to use this method, then it may be best to make sure the browsers you support behave the same using this technique.

http://jsfiddle.net/Chapm/2/

How to force the border color of a cell in a html table

The main problem here is the usage of the border-collapse: collapse; style. To solve that you could try one of the following solutions:

Solution 1:

You could try adding a different border style:

.today {
  border: 2px double black!important;
}

Here is a fiddle:

https://jsfiddle.net/h1t0ctmx/

Here is a documentation about the border conflict resolution:

https://www.w3.org/TR/REC-CSS2/tables.html#border-conflict-resolution

Solution 2:

Alternatively you could just add the following to your surrounding table:

table {
  border-collapse: separate;
}

Here is an updated fiddle:

https://jsfiddle.net/ggckr5mL/

Here is a documentation about the border-collapse property and some examples which explain the behaviour:

https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

CSS Table Row border color with border-collapse

Firstly, you might be better off not using jQuery and instead using pure CSS:

#datagrid tr.datarow:hover td {
    border: whatever;
}

Next, since you're using 1px borders, try this trick:

#datagrid tr.datarow:hover td {
    border-style: double;
}

Since double is "more distinct" then solid, its colour takes precedence over cells around it, and looks identical to solid anyway ;)

HTML CSS Table border color issue for row

This bug may happen with Chrome or Opera when you might have some colspan that are empty.
So either you choose a grey color directly without opacity as it is coming from opacaity.

Either you use the trick as below with box-shadow.

tr {
  box-shadow: 0px 1px 0px 0px rgba(38, 46, 46, 0.2);
}

I also customize property for tr:first-child and tr:last-child. to keep border normaly and not using box shadow

Demo:

.table-content {
    overflow-x: auto;
}

.table-content table tr th {
    font-weight: 500;
}

table {
    border-collapse: collapse;
    width: 100%;
}
tr:first-child, tr:last-child{
   box-shadow: 0px 0px 0px 0px rgba(38, 46, 46, 0.2);
   border-bottom: 1px solid rgba(38, 46, 46, 0.2);
}
tr {
  box-shadow: 0px 1px 0px 0px rgba(38, 46, 46, 0.2);
}
th {
    background: rgb(0 0 0 / 15%);
    padding: 15px;
       border-bottom: 1px solid rgba(38, 46, 46, 0.2);
    color: $dark-text;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

td {
    padding: 15px;
    font-size: 1rem;
}

<div class="table-content">
            <table>
                <tr>
                    <th rowspan="1"></th>
                    <th>Product</th>
                    <th>Rate</th>
                    <th>Discount</th>
                    <th>Quantity</th>
                    <th rowspan="1"></th>
                    <th>Amount</th>
                </tr>
                    <tr>
                        <td>
                            <span>
                                <img src="/assets/images/img-placeholder.svg" >
                            </span>
                        </td>
                        <td>keychain</td>
                        <td>200</td>
                        <td>20</td>
                        <td>Ordered</td>
                        <td>10</td>
                        <td>20</td>
                    </tr>
                    <tr>
                        <td colspan="4"></td>
                        <td>Invoiced</td>
                        <td>2</td>
                        <td colspan="1"></td>
                    </tr>
                    <tr>
                        <td colspan="4"></td>
                        <td>Shipped</td>
                        <td>1</td>
                        <td colspan="1"></td>
                    </tr>
                    <tr>
                        <td colspan="4"></td>
                        <td>Returned</td>
                        <td>1</td>
                        <td colspan="1"></td>
                    </tr>
            </table>
        </div>

how to have table cell border override neighbour table cell borders

Set the border to 1px double black.

table {  border-collapse: collapse;}
table td {  border: 1px solid red;  height: 50px;  width: 50px;}
table td.border {  border: 1px double black;}

<table>  <tr>    <td></td>    <td></td>    <td></td>    <td></td>  </tr>  <tr>    <td></td>    <td></td>    <td class="border"></td>    <td></td>  </tr>  <tr>    <td></td>    <td></td>    <td></td>    <td></td>  </tr>  </table>

Change table border upon hover

Updated better solution

Don't know why I didn't tackle the core issue from the start but your main issue was the item below was getting pushed down, well you can target the next item and set the border top to none

tr:hover + tr td {
    border-top: none;
}

The rest of your original code remains intact

table {    border-collapse: separate;    border-spacing: 0;}
td {    border: solid 1px black;    border-style: solid none;    padding: 10px;    border-bottom: 0;}
tr:hover + tr td {    border-top: none;}
td:first-child {    border-left-style: solid;    border-top-left-radius: 10px;    border-bottom-left-radius: 10px;}
td:last-child {    border-right-style: solid;    border-bottom-right-radius: 10px;    border-top-right-radius: 10px;}
tr:last-child td {    border-bottom: solid 1px black;}
tr:hover {    /*background-color: #cad6ed;*/}
tr:hover td {    border: 1px solid #12A0F8;    border-style: solid none;    padding: 10px;}
tr:hover td:first-child {    border-left-style: solid;    border-top-left-radius: 10px;    border-bottom-left-radius: 10px;}
tr:hover td:last-child {    border-right-style: solid;    border-bottom-right-radius: 10px;    border-top-right-radius: 10px;}

<table>  <tr>    <td>One</td><td>Two</td><td>Three</td>  </tr>  <tr>    <td>One</td><td>Two dfds</td><td>Three</td>  </tr>  <tr>    <td>One</td><td>Two</td><td>Three</td>  </tr></table>

Table Cellpadding and Border Color Issue

Your code almost works already. You just have to add border-collapse: collapse; to the table rule to avoid double borders, and add padding to the td rule:

table,
td,
th {
  border: 1px solid black;
  height: 30px !important;
  display: table-cell;
  vertical-align: middle;
}

table {
  border-top-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-left-width: 2px;
  width: 70%;
  border-collapse: collapse;
}

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

tr td {
  border-color: #e0dede !important;
  padding: 4px 10px;
}

<table border="2" width="100%" cellPadding="5">
  <tbody>
    <tr bgcolor="#1f4e79">
      <td> </td>
      <td style="text-align: center;"><span style="color: #ffffff;">Spring <80°</span></td>
      <td style="text-align: center;"><span style="color: #ffffff;">Summer >80°</span></td>
      <td style="text-align: center;"><span style="color: #ffffff;">Fall <80°</span></td>
    </tr>
    <tr>
      <td style="text-align: left;">Number of Days per Week</td>
      <td style="text-align: center;">1</td>
      <td style="text-align: center;">2</td>
      <td style="text-align: center;">1</td>
    </tr>
    <tr>
      <td style="text-align: left;">Duration</td>
      <td style="text-align: center;" colspan="3">Through the remainder of the season</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td style="text-align: left;" colspan="4">Turn on watering hose to a slight trickle and lay it at the base of the tree for approximately 20 to 30 minutes.  Repeat this step on the other side of the tree</td>
    </tr>
  </tbody>
</table>

Table with borders collapsed - right border overflows bottom

The solution we came up with is using :after pseudo-element rather than border. It works, but is not really as pretty as we'd like it to be:

* {  box-sizing: border-box;}
table {  border-collapse: collapse;  border-spacing: 0;}
td:after {  content: '\00a0';  background: orange;  position: absolute;  right: 0;  top: 0;  bottom: 0;  width: 6px;  display: inline-block;}
td {  position: relative;  background: white;  padding-right: 6px;    border-bottom: 6px solid blue;}

<table>    <tr><td>aaa</td><td>aaa</td></tr>    <tr><td>aaa</td><td>aaa</td></tr></table>

Table Border Color in CSS with Border Collapse