Search code examples
htmlcsscolorsborder

How to disable border color contrast with cell background?


Default behavior on HTML borders seems to differ with cell background color, imposing some sort of contrast which overrides a defined border color. I have attempted to trace the problem to turn off this override, but cannot find where it comes from.

The example below demonstrates the issue:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  border-color: lightgray;
}

.lav {
  background-color: lavender;
}

.medBlue {
  background-color: mediumblue;
}
<body>
  <table>
    <tr class="lav">
      <th>Firstname</th>
      <th>_</th>
      <th>Lastname</th>
    </tr>
    <tr class="lav">
      <td>Peter</td>
      <td>_</td>
      <td>Griffin</td>
    </tr>
    <tr class="medBlue">
      <td>Lois</td>
      <td>_</td>
      <td>Griffin</td>
    </tr>
  </table>
</body>

The first two rows have a border color of light gray, as expected. However, the third row with the darker background has its border color overridden with a different color.

How can I make border colors in this table uniform?

A similar question is asked here, but I don't think this issue has to do with transparency (at minimum, the border color on the darker cells would then be darker, not lighter).

The issue seems to relate to the degree of zoom, which leads me to believe it is a correction made by the browser for when the width of the border is (arbitrarily?) deemed too small. In other words, the color is changed to as-intended when zooming in on the table. A work-around is to simply make the border thicker, but I would like to avoid this. The issue holds when using PhantomJS to load such tables and subsequently screenshot them, which is what I need this code for.


Solution

  • The only thing you can do is to increase the border color darkness to please the eyes . .medBlue td {border-color: gray; }.

    table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
      border-color: lightgray;
    }
    
    .lav {
      background-color: lavender;
    }
    
    .medBlue {
      background-color: mediumblue;
    }
    .medBlue td {
      border-color: gray;
      }
    <body>
      <table>
        <tr class="lav">
          <th>Firstname</th>
          <th>_</th>
          <th>Lastname</th>
        </tr>
        <tr class="lav">
          <td>Peter</td>
          <td>_</td>
          <td>Griffin</td>
        </tr>
        <tr class="medBlue">
          <td>Lois</td>
          <td>_</td>
          <td>Griffin</td>
        </tr>
      </table>
    </body>