Styling hulp.
Ik heb deze 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
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
<!DOCTYPE html>
<html>
<head>
<title>PHP HTML TABLE DATA SEARCH</title>
<style>
table,tr,th,td
{
border: 0px solid black;
}
</style>
</head>
<body>
<!-- background="backgroundbriefje.png"-->
<form action="totalbriefjes.php" method="post">
<table style="width: 900px;" cellspacing="0" >
<tr bgcolor="#8064A2">
<th style="width: 100%;" align="left"><font color="white">Recipe Nr.: </th>
</tr>
</table>
<table style="width: 900px;" cellspacing="0" >
<tr bgcolor="#8064A2">
<th style="width: 100px;"><font color="white">Specifications</th>
<th style="width: 100px;"><font color="white">Target</th>
<th style="width: 10px;"><font color="white"></th>
<th style="width: 80px;"><font color="white">Min</th>
<th style="width: 5px;"><font color="white"></th>
<th style="width: 80px;"><font color="white">Max</th>
<th style="width: 10px;"><font color="white"></th>
<th style="width: 200px;"><font color="white">Unit</th>
<th style="width: 200px;"><font color="white">Condities</th>
<th style="width: 200px;"><font color="white">Rec.Nummer</th>
<th style="width: 200px;"><font color="white">Aktief</th>
<th style="width: 200px;"><font color="white">Naam</th>
</tr>
<!-- populate table from mysql database -->
<?php while($row = mysqli_fetch_array($search_result)):?>
<tr>
<td align="right"><?php echo $row['Spec'];?></td>
<td align="center"><?php echo $row['Nominal'];?></td>
<td align="right">(</td>
<td align="center"><?php echo $row['low'];?></td>
<td align="center">-</td>
<td align="center"><?php echo $row['High'];?></td>
<td align="left">)</td>
<td align="center"><?php echo $row['Unit'];?></td>
<td align="center"><?php echo $row['Conditions'];?></td>
<td align="center"><?php echo $row['Nr'];?></td>
<td align="center"><?php echo $row['Active'];?></td>
<td align="center"><?php echo $row['Name1'];?></td>
</tr>
<?php endwhile;?>
</table>
</form>
</body>
</html>
<html>
<head>
<title>PHP HTML TABLE DATA SEARCH</title>
<style>
table,tr,th,td
{
border: 0px solid black;
}
</style>
</head>
<body>
<!-- background="backgroundbriefje.png"-->
<form action="totalbriefjes.php" method="post">
<table style="width: 900px;" cellspacing="0" >
<tr bgcolor="#8064A2">
<th style="width: 100%;" align="left"><font color="white">Recipe Nr.: </th>
</tr>
</table>
<table style="width: 900px;" cellspacing="0" >
<tr bgcolor="#8064A2">
<th style="width: 100px;"><font color="white">Specifications</th>
<th style="width: 100px;"><font color="white">Target</th>
<th style="width: 10px;"><font color="white"></th>
<th style="width: 80px;"><font color="white">Min</th>
<th style="width: 5px;"><font color="white"></th>
<th style="width: 80px;"><font color="white">Max</th>
<th style="width: 10px;"><font color="white"></th>
<th style="width: 200px;"><font color="white">Unit</th>
<th style="width: 200px;"><font color="white">Condities</th>
<th style="width: 200px;"><font color="white">Rec.Nummer</th>
<th style="width: 200px;"><font color="white">Aktief</th>
<th style="width: 200px;"><font color="white">Naam</th>
</tr>
<!-- populate table from mysql database -->
<?php while($row = mysqli_fetch_array($search_result)):?>
<tr>
<td align="right"><?php echo $row['Spec'];?></td>
<td align="center"><?php echo $row['Nominal'];?></td>
<td align="right">(</td>
<td align="center"><?php echo $row['low'];?></td>
<td align="center">-</td>
<td align="center"><?php echo $row['High'];?></td>
<td align="left">)</td>
<td align="center"><?php echo $row['Unit'];?></td>
<td align="center"><?php echo $row['Conditions'];?></td>
<td align="center"><?php echo $row['Nr'];?></td>
<td align="center"><?php echo $row['Active'];?></td>
<td align="center"><?php echo $row['Name1'];?></td>
</tr>
<?php endwhile;?>
</table>
</form>
</body>
</html>
Nu wil ik echter dat het zo gaat uitzien als in de foto LINK(image taqs werkt niet)
Nu kan ik die lijnen krijgen door in de style dit te gebruiken.:
Code (php)
1
2
2
tr:nth-child(even) {background: #F2F2F2}
tr:nth-child(odd) {background: #FFFFFF}
tr:nth-child(odd) {background: #FFFFFF}
Echter dan verdwijnt weer die bovenste blauwe balk in mijn code.
Hoe kan ik en die blauwe balk aanhouden en dan overgaan naar die om en om kleuren?
Gewijzigd op 28/08/2018 19:15:53 door Pascal Schuffelers
Dan is je probleem gelijk opgelost.
Edit;
De odd is niet perse nodig.
Om de kleur vloeiend door te laten lopen zonder witruimtes moet je het volgende aan je css toevoegen.
table{border-collapse:collapse;}
Het is trouwens mooier en makkelijker als je alle styling tussen je <style></style> plaatst of in een apart css bestand en niet overal in de code styling toevoegen.
Gewijzigd op 28/08/2018 19:42:59 door Michael -
Code (php)
1
tr:first-child { background: blue; }
Dan overschrijf je de eerste TR met een andere achtergrondskleur.
En inderdaad wat Michael zegt:
Het meest nette is om de background-color op de 'th' (table heading) en 'td' (table data) te setten.
Gewijzigd op 28/08/2018 19:40:41 door B a s
Quote:
De titel van een tabel hoort ook in een TH en niet in een TR. Voorbeeld
Dan is je probleem gelijk opgelost.
Dan is je probleem gelijk opgelost.
Dat staat het toch al als ik naar die link kijk?
Quote:
Het is trouwens mooier en makkelijker als je alle styling tussen je <style></style> plaatst of in een apart css bestand en niet overal in de code styling toevoegen.
Daar heb je gelijk in , alleen mijn kolommen hebben diverse breedtes, dan zal ik toch verschillen styles nodig hebben wil ik die opvangen toch?
Maar @Michael gaf aan, als ik dat zou doen zoals de link zou het wel werken, maar hier werkt het niet.
Als je dan eerst de regel van Bas toevoegt is het opgelost.
Voorbeeld: https://jsfiddle.net/3tsj75d4/5/
Gewijzigd op 28/08/2018 21:20:33 door Michael -