Skip to content

Commit 4917736

Browse files
JelleasJelleas
committed
render
1 parent 5b5e238 commit 4917736

1 file changed

Lines changed: 68 additions & 22 deletions

File tree

‎problems/render/index.md‎

Lines changed: 68 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -18,43 +18,89 @@ De afbeelding is gecentreerd. De langste rij bepaalt de breedte van de afbeeldin
1818

1919
Render "5, 3, 1, 3, 5":
2020

21-
<table style="border-collapse: collapse;">
21+
<style>
22+
table {
23+
border-collapse: collapse;
24+
}
25+
26+
td {
27+
padding: 0;
28+
margin: 0;
29+
width: 1em;
30+
height: 1em;
31+
}
32+
33+
.checkbox {
34+
appearance: none;
35+
-webkit-appearance: none;
36+
width: 1em;
37+
height: 1em;
38+
display: inline-block;
39+
text-align: center;
40+
vertical-align: middle;
41+
border: 1px solid #000;
42+
font-size: 0.8em;
43+
font-weight: bold;
44+
cursor: pointer;
45+
line-height: 1em;
46+
padding: 0;
47+
}
48+
49+
.checkbox:checked::before {
50+
content: "#";
51+
display: block;
52+
text-align: center;
53+
color: #000;
54+
}
55+
</style>
56+
57+
<table>
58+
<tr>
59+
<td><input type="checkbox" class="checkbox" /></td>
60+
<td><input type="checkbox" class="checkbox" /></td>
61+
<td><input type="checkbox" class="checkbox" /></td>
62+
<td><input type="checkbox" class="checkbox" /></td>
63+
<td><input type="checkbox" class="checkbox" /></td>
64+
</tr>
2265
<tr>
23-
<td style="padding: 0; margin: 0;"><input style="width: 1em;" /></td>
24-
<td style="padding: 0; margin: 0;"><input style="width: 1em;" /></td>
25-
<td style="padding: 0; margin: 0;"><input style="width: 1em;" /></td>
26-
<td style="padding: 0; margin: 0;"><input style="width: 1em;" /></td>
27-
<td style="padding: 0; margin: 0;"><input style="width: 1em;" /></td>
66+
<td><input type="checkbox" class="checkbox" /></td>
67+
<td><input type="checkbox" class="checkbox" /></td>
68+
<td><input type="checkbox" class="checkbox" /></td>
69+
<td><input type="checkbox" class="checkbox" /></td>
70+
<td><input type="checkbox" class="checkbox" /></td>
2871
</tr>
2972
<tr>
30-
<td style="padding: 0; margin: 0;"><input style="width: 1em;" /></td>
31-
<td style="padding: 0; margin: 0;"><input style="width: 1em;" /></td>
32-
<td style="padding: 0; margin: 0;"><input style="width: 1em;" /></td>
33-
<td style="padding: 0; margin: 0;"><input style="width: 1em;" /></td>
34-
<td style="padding: 0; margin: 0;"><input style="width: 1em;" /></td>
73+
<td><input type="checkbox" class="checkbox" /></td>
74+
<td><input type="checkbox" class="checkbox" /></td>
75+
<td><input type="checkbox" class="checkbox" /></td>
76+
<td><input type="checkbox" class="checkbox" /></td>
77+
<td><input type="checkbox" class="checkbox" /></td>
3578
</tr>
3679
<tr>
37-
<td style="padding: 0; margin: 0;"><input style="width: 1em;" /></td>
38-
<td style="padding: 0; margin: 0;"><input style="width: 1em;" /></td>
39-
<td style="padding: 0; margin: 0;"><input style="width: 1em;" /></td>
40-
<td style="padding: 0; margin: 0;"><input style="width: 1em;" /></td>
41-
<td style="padding: 0; margin: 0;"><input style="width: 1em;" /></td>
80+
<td><input type="checkbox" class="checkbox" /></td>
81+
<td><input type="checkbox" class="checkbox" /></td>
82+
<td><input type="checkbox" class="checkbox" /></td>
83+
<td><input type="checkbox" class="checkbox" /></td>
84+
<td><input type="checkbox" class="checkbox" /></td>
4285
</tr>
4386
<tr>
44-
<td style="padding: 0; margin: 0;"><input style="width: 1em;" /></td>
45-
<td style="padding: 0; margin: 0;"><input style="width: 1em;" /></td>
46-
<td style="padding: 0; margin: 0;"><input style="width: 1em;" /></td>
47-
<td style="padding: 0; margin: 0;"><input style="width: 1em;" /></td>
48-
<td style="padding: 0; margin: 0;"><input style="width: 1em;" /></td>
87+
<td><input type="checkbox" class="checkbox" /></td>
88+
<td><input type="checkbox" class="checkbox" /></td>
89+
<td><input type="checkbox" class="checkbox" /></td>
90+
<td><input type="checkbox" class="checkbox" /></td>
91+
<td><input type="checkbox" class="checkbox" /></td>
4992
</tr>
5093
</table>
5194

52-
<details markdown="1"><summary markdown="span">Spoiler</summary>
95+
96+
<details markdown="1"><summary markdown="span">De oplossing:</summary>
97+
5398
#####
5499
###
55100
#
56101
###
57102
#####
103+
58104
</details>
59105

60106
## Transformaties

0 commit comments

Comments
 (0)