использование z-индекса и диагональных элементов внутри элемента таблицы <td>

avatar
edwardsmarkf
1 июля 2021 в 16:55
42
2
0

Я пытаюсь "скрыть" любое переполнение диагональной строки внутри элемента таблицы <td>.

пример: 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!  */
}

В моем примере скопировал Отсюда и Здесь Позиция Z-index <6415301>. как предложено здесь и здесь. И свойство overflow у меня тоже не работает.

Он ведет себя так, как будто диагональная линия особенная и к ней больше не применяются свойства CSS.

Мне не удалось найти какие-либо предложения SO, применимые к диагональной линии внутри элемента таблицы <td>.

Вероятно, я мог бы сделать что-нибудь с помощью jScript, но надеялся на решение на чистом CSS с минимальными изменениями. Или, может быть, я пропустил что-то очень очевидное?

Большое спасибо.

Источник

Ответы (2)

avatar
mike Andrade
1 июля 2021 в 21:31
1

хорошо, я понял, что вы можете использовать класс (.bottom) для "видимого" td

проверьте это

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/

edwardsmarkf
1 июля 2021 в 22:41
0

ваш jsfiddle не полностью скрывает избыток, он просто перемещает его за пределы таблицы. Я надеялся полностью скрыть это? но вы точно на правильном пути! jsfiddle.net/s23fhdbe/1

mike Andrade
2 июля 2021 в 17:38
0

я выглядел так, потому что я написал, добавил еще один td и более длинный диагональный текст. но все еще думаю над более причудливым решением jsfiddle.net/qxLj64er

avatar
mike Andrade
1 июля 2021 в 19:02
0

Вы можете добавить что-то подобное, если имеете дело только с элементами, показанными в примере тд: последний ребенок { цвет фона:белый }