Наклонная штриховка ячейки таблицы средствами css

#html #css

Необходимо выполнить наклонную штриховку ячейки (ячеек) таблицы с помощью css так,
чтобы изменение размера ячейки не влияло на возникновение некрасивых стыков между ячейками.

Аналогичная вещь реализована в Excel



Пробовал сделать так



table {
width:400px
}
.hatching-red {
    background: linear-gradient(45deg, rgba(0, 0, 0, 0) 49.9%, red 49.9%, red 60%,
rgba(0, 0, 0, 0) 60% ), linear-gradient(45deg, red 10%, rgba(0, 0, 0, 0) 10% );
    background-size: 0.5em 0.5em
}
.hatching-green {
    background: linear-gradient(45deg, rgba(0, 0, 0, 0) 49.9%, green 49.9%, green
60%, rgba(0, 0, 0, 0) 60% ), linear-gradient(45deg, green 10%, rgba(0, 0, 0, 0) 10% );
    background-size: 0.5em 0.5em
}

   

    
1
    
2
   
 
 




Выглядит хорошо



Однако, при изменение масштаба можно заметить искривление линий и не стыковку между
ячейками.





Как решить данную проблему? Возможно существует наиболее правильный вариант. Буду
рад любому примеру.
    

Ответы

Ответ 1

Попробуйте использовать   background-attachment: fixed; Это свойство заставляет просчитывать
координаты фона не от конкретного элемента, а от страницы в целом.



table {
  width: 400px;
  border-spacing: 0;
}

.hatching-red {
  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 49.9%, red 49.9%, red 60%,
rgba(0, 0, 0, 0) 60%) 
              fixed,
              linear-gradient(45deg, red 10%, rgba(0, 0, 0, 0) 10%) 
              fixed;
  background-size: 0.5em 0.5em
}

.hatching-green {
  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 49.9%, green 49.9%, green 60%,
rgba(0, 0, 0, 0) 60%) 
              fixed,
              linear-gradient(45deg, green 10%, rgba(0, 0, 0, 0) 10%) 
              fixed;
  background-size: 0.5em 0.5em
}

  

    
1
    
2