Virusscanner tips?
opmaak voor kolomnummer = rijnummer
Is het mogelijk om zonder classe aan een td te geven om opmaak toe te kennen wanneer het rijnummer=kolomnummer.?
Dus alle cellen in een diagonaal van links boven naar rechts onder: A1, b2, c3, d4,..., Z26
Nu werk ik met een classe welke ik via php toeken als beide nummers gelijk zijn.
dit werkt bijvoorbeeld niet:
Code (php)
1
2
3
2
3
tr:nth-child(5) col:nth-child(5) {
background-color: lightblue;
}
background-color: lightblue;
}
ook niet in omgekeerde volgorde.
Jan
Volledige test code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<meta NAME="author" content="JanR.be">
<style type="text/css">
table{
margin:auto;
}
table, td{
border: red solid 1px;
border-collapse: collapse;
text-align: center;
}
col{
width:50px;
}
tr{
height: 50px;
}
tr:nth-child(5) col:nth-child(5) {
background-color: lightblue ;
}
</style>
</head>
<body>
<table>
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
<td>A5</td>
<td>A6</td>
<td>A7</td>
<td>A8</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
<td>B5</td>
<td>B6</td>
<td>B7</td>
<td>B8</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td>C5</td>
<td>C6</td>
<td>C7</td>
<td>C8</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
<td>D5</td>
<td>D6</td>
<td>D7</td>
<td>D8</td>
</tr>
<tr>
<td>E1</td>
<td>E2</td>
<td>E3</td>
<td>E4</td>
<td>E5</td>
<td>E6</td>
<td>E7</td>
<td>E8</td>
</tr>
<tr>
<td>F1</td>
<td>F2</td>
<td>F3</td>
<td>F4</td>
<td>F5</td>
<td>F6</td>
<td>F7</td>
<td>F8</td>
</tr>
<tr>
<td>G1</td>
<td>G2</td>
<td>G3</td>
<td>G4</td>
<td>G5</td>
<td>G6</td>
<td>G7</td>
<td>G8</td>
</tr>
<tr>
<td>H1</td>
<td>H2</td>
<td>H3</td>
<td>H4</td>
<td>H5</td>
<td>H6</td>
<td>H7</td>
<td>H8</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<meta NAME="author" content="JanR.be">
<style type="text/css">
table{
margin:auto;
}
table, td{
border: red solid 1px;
border-collapse: collapse;
text-align: center;
}
col{
width:50px;
}
tr{
height: 50px;
}
tr:nth-child(5) col:nth-child(5) {
background-color: lightblue ;
}
</style>
</head>
<body>
<table>
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
<td>A5</td>
<td>A6</td>
<td>A7</td>
<td>A8</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
<td>B5</td>
<td>B6</td>
<td>B7</td>
<td>B8</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td>C5</td>
<td>C6</td>
<td>C7</td>
<td>C8</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
<td>D5</td>
<td>D6</td>
<td>D7</td>
<td>D8</td>
</tr>
<tr>
<td>E1</td>
<td>E2</td>
<td>E3</td>
<td>E4</td>
<td>E5</td>
<td>E6</td>
<td>E7</td>
<td>E8</td>
</tr>
<tr>
<td>F1</td>
<td>F2</td>
<td>F3</td>
<td>F4</td>
<td>F5</td>
<td>F6</td>
<td>F7</td>
<td>F8</td>
</tr>
<tr>
<td>G1</td>
<td>G2</td>
<td>G3</td>
<td>G4</td>
<td>G5</td>
<td>G6</td>
<td>G7</td>
<td>G8</td>
</tr>
<tr>
<td>H1</td>
<td>H2</td>
<td>H3</td>
<td>H4</td>
<td>H5</td>
<td>H6</td>
<td>H7</td>
<td>H8</td>
</tr>
</table>
</body>
</html>
Gewijzigd op 15/04/2016 12:36:19 door Jan R
Code (php)
1
tr:nth-child(5) td:nth-child(5) { background-color: lightblue; }
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
tbody tr:nth-child(1) td:nth-child(1),
tbody tr:nth-child(2) td:nth-child(2),
tbody tr:nth-child(3) td:nth-child(3),
tbody tr:nth-child(4) td:nth-child(4),
tbody tr:nth-child(5) td:nth-child(5),
tbody tr:nth-child(6) td:nth-child(6),
tbody tr:nth-child(7) td:nth-child(7),
tbody tr:nth-child(8) td:nth-child(8) {
background-color: lightblue;
}
tbody tr:nth-child(2) td:nth-child(2),
tbody tr:nth-child(3) td:nth-child(3),
tbody tr:nth-child(4) td:nth-child(4),
tbody tr:nth-child(5) td:nth-child(5),
tbody tr:nth-child(6) td:nth-child(6),
tbody tr:nth-child(7) td:nth-child(7),
tbody tr:nth-child(8) td:nth-child(8) {
background-color: lightblue;
}
Je kunt bovenstaande eventueel vanuit je PHP genereren, mochten je regels en kolommen middels een index gemaakt worden.
Ik hoopte echter dat er iets eenvoudigers zou geweest zijn zoals rownr=columnnr. iets zoals calc
Jan
Code (php)
Vervolgens maak je 2 styles aan
een td met class zoals hij standaard moet zijn
en een td met class _selected
De TD geef je dan zo je stijl:
Code (php)
1
<td class="regel$stijl_toevoeging">$index - $index_b</td>
En de default style:
Code (php)
1
2
3
2
3
td.regel{
}
}
En de geselecteerde style
Code (php)
1
2
3
2
3
td.regel_selected{
background-color: lightblue;
}
background-color: lightblue;
}
Peter K op 18/04/2016 18:55:05:
Dat kun je wel doen, als je 2 loops hebt:
Heel juist. Op deze manier (ongeveer) werk ik dus nu. Echter ik wou weten kan het eenvoudiger/beter met css. Toch bedankt.
Jan