opmaak voor kolomnummer = rijnummer

Door Jan R op 15-04-2016 12:35 gewijzigd op 15-04-2016 12:36

1.986 views

Hoi,

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:


tr:nth-child(5) col:nth-child(5) {
	background-color: lightblue;
}

ook niet in omgekeerde volgorde.

Jan
Volledige test code:


<!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>

Jan de Laet

15-04-2016 15:18

Hiermee gaat het wel (td ipv col):

            tr:nth-child(5) td:nth-child(5)  { background-color: lightblue; }

Peter K

15-04-2016 15:38


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;
}

Je kunt bovenstaande eventueel vanuit je PHP genereren, mochten je regels en kolommen middels een index gemaakt worden.

Jan R

17-04-2016 07:36

Bedankt voor de hulp.
Ik hoopte echter dat er iets eenvoudigers zou geweest zijn zoals rownr=columnnr. iets zoals calc

Jan

Peter K

18-04-2016 18:55

Dat kun je wel doen, als je 2 loops hebt:

<?php

for($index = 1; $index <= 10; $index++)
{
for($index_b = 1; $index_b <= 10; $index_b++)
{
if($index == $index_b)
{
$stijl_toevoeging = "_selected";
} else {
$stijl_toevoeging = "";
}
}
}

?>

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:


<td class="regel$stijl_toevoeging">$index - $index_b</td>

En de default style:


td.regel{

}

En de geselecteerde style


td.regel_selected{
background-color: lightblue;
}

Jan R

19-04-2016 08:36

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

Reageren

Inloggen om te reageren