0

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.

edwardsmarkf
  • 1,387
  • 2
  • 16
  • 31

2 Answers2

1

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/

mike Andrade
  • 21
  • 4
  • your jsfiddle does not totally hide the excess, it just moves it outside the table. i was hoping to completely hide it? but you are on the right track for sure! https://jsfiddle.net/s23fhdbe/1/ – edwardsmarkf Jul 01 '21 at 22:41
  • i looked like that because i wrote added another td and a longer diagonal text. yet still thinking in a fancier solution https://jsfiddle.net/qxLj64er/ – mike Andrade Jul 02 '21 at 17:38
0

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

mike Andrade
  • 21
  • 4