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 change color of text based on the php condition [closed]

    How to apply nested css using jQuery?

    how to center and Crop an image to square with CSS

    How to align DIV right or left or center in CSS without absolute positioning?

    jquery width toggle animation is showing vertical cells during animation takes place

    How to get use the functionality same as “-webkit-appearance” in firefox?

    How can I center my ul li list in css?

    CSS: how to align text content horizontally-centered and vertically-centered?

    how to create a vertical menu in html/css [closed]

    [HTML][CSS] How to change opacity of background-image but not the text on it?

    How to specify max-height css property to Screen size

    How to remove the gap between each list-item in an unordered list?

    How to align a paragraph to center of cell in table

    how to create a facebook look alike gallery with css and jquery? [closed]

    How to change active link color in bootstrap css?

    How to create color custom scrollbar in pure css? [closed]

    How make a fixed element be on top of another position fixed element

    How do I center all my elements?

    How to Make CSS Property Apply to Everything Within Bootstrap Navbar?

    How to match an index of a CSS class with JavaScript?

    How to notify view from model to change a value in backbone

    How can i remove all attributes from any css selector? To override and reset any css id selectors?

    How to set a menu hover delay

    How to display code in the same line?

    How to animate some parts of an image using CSS?

    How to position the arrow of this widget correctly?

    How to set input:focus style programatically using JavaScript

    How can I set a border in alignment with other borders

    How to get rid of spacing between Bootstrap panels?

    Using CSS to show gradient as well as an image