回答編集履歴
1
情報の追加。
answer
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
提示されたコードはFirefoxではそこまで変にならなかったりする。
|
|
2
|
-
ざっくり作ってみたが、trの背景に2pxのグラデーションで書く手もあるか。
|
|
2
|
+
ざっくり作ってみたが、trの背景に2pxのグラデーションで書く手もあるか。（追記：後半に追加済み）
|
|
3
3
|
|
|
4
4
|
```HTML
|
|
5
5
|
<div id="test"><table>
|
|
@@ -44,4 +44,25 @@
|
|
|
44
44
|
tr:first-child > td:first-child > div::before {
|
|
45
45
|
content: none;
|
|
46
46
|
}
|
|
47
|
-
```**動くサンプル：**[https://jsfiddle.net/a2095qmz/2/](https://jsfiddle.net/a2095qmz/2/)
|
|
47
|
+
```**動くサンプル：**[https://jsfiddle.net/a2095qmz/2/](https://jsfiddle.net/a2095qmz/2/)
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
**追記：**
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
```CSS
|
|
56
|
+
table {
|
|
57
|
+
border-collapse: collapse;
|
|
58
|
+
}
|
|
59
|
+
tr {
|
|
60
|
+
background-image: repeating-linear-gradient(90deg, #000, #000 10px, transparent 0, transparent 15px);
|
|
61
|
+
background-size: 15px 2px;
|
|
62
|
+
background-position: bottom left;
|
|
63
|
+
background-repeat: repeat-x;
|
|
64
|
+
}
|
|
65
|
+
```**動くサンプル：**[https://jsfiddle.net/a2095qmz/3/](https://jsfiddle.net/a2095qmz/3/)
|
|
66
|
+
|
|
67
|
+
【CSSグラデーションで作った背景パターンのサンプル | NxWorld】
|
|
68
|
+
[https://www.nxworld.net/tips/css-gradient-pattern.html](https://www.nxworld.net/tips/css-gradient-pattern.html)
|