Css Tabel probleem
ik had dus een tabel gemaakt met 8 kolommen.
Maar ik had nu het idee om daar een zoekoptie in te planten dus wil ik
helemaal bovenaan boven de hoofding van de 8 kolommen
een form inbouwen. Tot het form inbouwen is het mij gelukt.
Maar nu zou ik graag hebben dat rond dat form dezelfde styles gebruikt worden
als de th maar als ik daar gewoon een th rond zet rond mijn form dan lukt dat niet.
Want dan is die th hetzelfde uitgelijnd zoals de th van id.
Kan iemand mij helpen om over de hele lijn de achtergrond kleur: #D04528 te geven?
Alvast bedankt
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
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
<?php
<html>
<head>
<!-- Dit moet nog in apart document komen! -->
<style type="text/css">
table.hovertable {
font-family: verdana,arial,sans-serif;
font-size:12px;
color:#FAFAFA;
border-width: 1px;
border-color: #E8B7AC;
border-collapse: collapse;
}
table.hovertable th {
background-color:#D04528;
border-width: 2px;
padding: 8px;
border-style: solid;
border-color: #D04528;
}
table.hovertable tr {
background-color:#EB7050;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #FFFFFF;
}
table.hovertable td {
color:#000000;
border-width: 0px;
padding: 8px;
border-style: solid;
}
.tb5 {
border:2px solid #FFB39F;
border-radius:7px;
height: 20px;
width: 230px;
margin-bottom:5px;
padding-left:5px;
padding-right:5px;
}
</style>
</head>
<body>
<table border="1" cellspacing="2" cellpadding="2" class="hovertable" >
<tr><form>Naam: <input type="text" name="naam" class="tb5" size="50" style="width:175px;" maxlength="25"/></form></tr>
<tr>
<th>Id</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr onmouseover="this.style.backgroundColor='#FFB39F';" onmouseout="this.style.backgroundColor='#EB7050';">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</body>
</html>
?>
<html>
<head>
<!-- Dit moet nog in apart document komen! -->
<style type="text/css">
table.hovertable {
font-family: verdana,arial,sans-serif;
font-size:12px;
color:#FAFAFA;
border-width: 1px;
border-color: #E8B7AC;
border-collapse: collapse;
}
table.hovertable th {
background-color:#D04528;
border-width: 2px;
padding: 8px;
border-style: solid;
border-color: #D04528;
}
table.hovertable tr {
background-color:#EB7050;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #FFFFFF;
}
table.hovertable td {
color:#000000;
border-width: 0px;
padding: 8px;
border-style: solid;
}
.tb5 {
border:2px solid #FFB39F;
border-radius:7px;
height: 20px;
width: 230px;
margin-bottom:5px;
padding-left:5px;
padding-right:5px;
}
</style>
</head>
<body>
<table border="1" cellspacing="2" cellpadding="2" class="hovertable" >
<tr><form>Naam: <input type="text" name="naam" class="tb5" size="50" style="width:175px;" maxlength="25"/></form></tr>
<tr>
<th>Id</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr onmouseover="this.style.backgroundColor='#FFB39F';" onmouseout="this.style.backgroundColor='#EB7050';">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</body>
</html>
?>
onmouseover="this.style.backgroundColor='#FFB39F';" onmouseout="this.style.backgroundColor='#EB7050';"
Je kunt ook gewoon in CSS tr:hover doen.