CODEWITHSUNDEEP
htmlcss
edwardsmarkf
edwardsmarkf

Reputation: 1417

using z-index and diagonal items inside of a table <td> element

I am trying to "hide" any overflow from a diagonal line inside of a table <td> element.

example: https://jsfiddle.net/edwardsmarkf/8zuk6naL/47/

span#diagLine {
  transform: rotate(345deg);
  transform-origin: left bottom;
  position: absolute;
  ...........
  z-index: -100;  /* does not do anything!  */
  overflow: hidden; /* does not do anything!  */
}

In my example copied from here and here,the z-index does not seem to work for me even though the position is absolute as suggested here and here. And the overflow property does not appear to work for me either.

It behaves as if a diagonal line is special and the CSS properties no longer apply to it.

I was unable to find any SO suggestions that apply to a diagonal line inside of a table <td> element.

I could probably do something with jScript, but was hoping for a pure CSS solution, hopefully with just minimal changes. Or maybe I have missed something very obvious?

Thank you very much.

Upvotes: 0

Views: 96

Answers (2)

mike Andrade
mike Andrade

Reputation: 21

ok I figure out you can use a class (.bottom) for the "seeable" td

check this out

span#diagLine {
  margin-left: 0px;
  margin-top: 10px;
  transform: rotate(345deg);
  transform-origin: left bottom;
  position: absolute;
  display:relative;
  text-decoration: none;
  color: blue;
  font-size: 13px;
  z-index:-10;
}

td.styleTableTdItem {
  width: 60px;
  height: 60px;
  z-index: 1; 
   
}

td:not(.bottom){
  background-color:white
}

https://jsfiddle.net/s23fhdbe/1/

Upvotes: 1

mike Andrade
mike Andrade

Reputation: 21

You can add something like this if you are dealing only with the elements shown in the example td:last-child{ background-color:white }

Upvotes: 0

Related Questions