2

What I'm basically doing is to reproduce a pre-formatted table in HTML/CSS. However, it's displayed differently in different browsers. Firefox and IE shows it as it's intended. Chrome, however, draws a bogus line that's not there even by inspecting the HTML. In the original file, Chromium Embedded (CEF1) has additional differences.

I made a snippet to demonstrate the problem:

<html>

<head>
  <style type="text/css" media="all">
    @media all {
      TABLE {
        border-collapse: collapse;
        border-spacing: 0;
        margin: 0;
        padding: 0;
        border: none;
        table-layout: fixed;
        empty-cells: show;
      }
      TR {
        page-break-inside: avoid;
      }
      TD {
        font-size: 11pt;
        font-family: "Times New Roman", Times, serif;
        text-align: center;
        vertical-align: middle;
        padding: 1px;
      }
      TD.S1 {
        border-left: 1px solid black;
        border-right: 1px solid black;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
      }
      TD.S2 {
        border: none;
      }
      TD.S3 {
        border-left: none;
        border-right: none;
        border-top: none;
        border-bottom: 1px dotted black;
      }
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <td class="S1">A</td>
      <td class="S2">B</td>
    </tr>
    <tr>
      <td colspan="2" class="S3">C</td>
    </tr>
  </table>
</body>

</html>

So the question is: Is there a problem with the above CSS, or anything that should be used in a different way? I doubt such a basic thing could be a Chrome bug. Still, I don't want that line below cell "B".

Esko
  • 4,109
  • 2
  • 22
  • 37
Yogurt
  • 83
  • 9
  • 1
    Remove `border-collapse: collapse;` and should work. This is an old bug in Chrome(since 2008 or something) – FortyTwo Feb 28 '19 at 13:13

4 Answers4

3

Browsers have some leverage in how they interpret things, and Chrome can be ...different... and intractable sometimes.

In any case, I don't think you can reset the border color or size (it ignores transparent and 0), but you can override it with a color that will blend into your background. Removing border-collapse may work, but seems like the opposite of what you really want.

As a bonus, putting the border on all sides corrects a jog downward that Chrome was giving 'B' because it lacked a border. (Other browsers didn't do this.)

<html>

<head>
  <style type="text/css" media="all">
    @media all {
      TABLE {
        border-collapse: collapse;
        border-spacing: 0;
        margin: 0;
        padding: 0;
        border: none;
        table-layout: fixed;
        empty-cells: show;
      }
      TR {
        page-break-inside: avoid;
      }
      TD {
        font-size: 11pt;
        font-family: "Times New Roman", Times, serif;
        text-align: center;
        vertical-align: middle;
        padding: 1px;
      }
      TD.S1 {
        border-left: 1px solid black;
        border-right: 1px solid black;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
      }
      TD.S2 {
        border: 1px solid white;
      }
      TD.S3 {
        border-left: none;
        border-right: none;
        border-top: none;
        border-bottom: 1px dotted black;
      }
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <td class="S1">A</td>
      <td class="S2">B</td>
    </tr>
    <tr>
      <td colspan="2" class="S3">C</td>
    </tr>
  </table>
</body>

</html>
  • I was going to accept this solution because it leaves my `border-collapse` I would need for other stuff in the original table. However, replacing all `none` borders with `1px solid white` is also buggy in Chrome. You may try this with a 3*3 table with quincunx bordered cells. – Yogurt Mar 01 '19 at 14:55
1

The border-collapse was causing the issue in Chrome. Not sure if needed?

https://jsfiddle.net/mayjr9dL/

 @media all {
      TABLE {
        border-spacing: 0;
        margin: 0;
        padding: 0;
        border: none;
        table-layout: fixed;
        empty-cells: show;
      }
      TR {
        page-break-inside: avoid;
      }
      TD {
        font-size: 11pt;
        font-family: "Times New Roman", Times, serif;
        text-align: center;
        vertical-align: middle;
        padding: 1px;
      }
      TD.S1 {
        border-left: 1px solid black;
        border-right: 1px solid black;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
      }
      TD.S2 {
        border: none;
      }
      TD.S3 {
        border-left: none;
        border-right: none;
        border-top: none;
        border-bottom: 1px dotted black;
      }
    }
designtocode
  • 2,215
  • 4
  • 21
  • 35
1

You just need to remove border-collapse:collapse to remove underline from cell "B".

<html>

<head>
  <style type="text/css" media="all">
    @media all {
      TABLE {
       
        border-spacing: 0;
        margin: 0;
        padding: 0;
        border: none;
        table-layout: fixed;
        empty-cells: show;
      }
      TR {
        page-break-inside: avoid;
      }
      TD {
        font-size: 11pt;
        font-family: "Times New Roman", Times, serif;
        text-align: center;
        vertical-align: middle;
        padding: 1px;
      }
      TD.S1 {
        border-left: 1px solid black;
        border-right: 1px solid black;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
      }
      TD.S2 {
        border: none;
      }
      TD.S3 {
        border-left: none;
        border-right: none;
        border-top: none;
        border-bottom: 1px dotted black;
      }
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <td class="S1">A</td>
      <td class="S2">B</td>
    </tr>
    <tr>
      <td colspan="2" class="S3">C</td>
    </tr>
  </table>
</body>

</html>
Arjun
  • 1,294
  • 13
  • 24
1

I think this is happening because of your border-collapse property. If you remove it you will see the line vanishes from underneath the B. Sometimes browsers interpret CSS properties differently because there is no set rules. You can try out websites like caniuse to find out the difference in CSS properties or Pleeease, which is a Node.js application that easily processes your CSS. It simplifies the use of preprocessors and combines them with best postprocessors. It helps create clean stylesheets, support older browsers and offers better maintainability.

Moon
  • 72
  • 1
  • 9