How to make top/bottom borders appear ontop of left/right borders crossbrowser css


Tags: css,google-chrome,internet-explorer,cross-browser,border

Problem :

I want to style a table spreadsheet like, with vertical grey borders, and horizontal black borders (for sums).

I get what I want in chrome with this: https://jsfiddle.net/m9abo8f6/4/

HTML

<table>
<tr><td>row1</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>row2</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>row3</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>Total</td><td>3</td><td>6</td><td>9</td></tr>
</table>

CSS

body {
  background-color:white;
}
table {
  border-collapse: collapse;
  border-spacing: 0px;
}

tr:last-child {
  border-top: 1px double black;
}

td {
  border-right: 1px solid #d0d0d0;
}

But IE (11) renders the vertical borders on top of the horizontal, also the horizontal border isn't quite black in IE, so there is something more going on there.

Is there a way to get what I want (chrome's render of the above) in css, without tricks like overlaying divs/other elements, reasonably cross browser ?



Solution :

body {
  background-color:white;
}
table {
  border-collapse: collapse;
  border-spacing: 0px;
  position: relative;
  overflow: hidden;
}

tr:last-child td:before {
  position: absolute;
  background: #000;
  margin-top: -2px;
  height: 1px;
  content: '';
  right: 0;
  left: 0;
}

td {
  border-right: 1px solid #d0d0d0;
}
<table>
  <tr><td>row1</td><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>row2</td><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>row3</td><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>Total</td><td>3</td><td>6</td><td>9</td></tr>
</table>


    CSS Howto..

    How to force a div to honor its constraints and put things into overflow instead of resizing a column?

    How to.. the middle div of three ever on center and if the navigator are resized

    How to set browser full width navigation?

    How to override CSS code with a new class?

    How to move items left and right in an html table using css? -

    How to customize post excerpt css

    How do I uncollapse a margin?

    How to add sub-menu (css) under actual sub-menu in WordPress

    How to apply CSS selector on Select Option Child

    How to capture hover events on css (less) box-shadow

    How to display data from a file on website load? [closed]

    How to vertically align lists when one li is a div

    How to repeat an image but only horizontally?

    How to load specific set css commands only at the first browsing of the web site?

    How volume button is generated [closed]

    How to set only vertical padding?

    How to stop CSS Code Display:none for specific id or class?

    How to fix image urls when processing css files with Gulp?

    How to show a node in a block in drupal 7

    Can User-Agent affect how CSS is rendered on a page?

    how to create sprite with css [closed]

    How can I increase space just above the footer line?

    How can I embed a smartphone simulator in html5? [closed]

    How to style this form using CSS?

    how do you link static pages in rails to your css files? [closed]

    CSS - How to view computed font size?

    How to use the Javascript to add/remove the CSS/colour style to the html page?

    How to use relative referencing in CSS files

    How to dynamically set and modify CSS in JavaScript?

    How to hide a div off the viewport responsively, and always showing the bottom 50px?