adrien/Sudoku
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

use css nth-child for regions' borders

Browse Source
This commit is contained in:
Adrien MALINGREY
2020-10-07 20:06:27 +02:00
parent a56d0b899d
commit 7195d84a55
2 changed files with 21 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
game.php
View File

@ -26,16 +26,6 @@
<tr>
<?php
for ($column = 0; $column < 9; $column++) {
switch($row%3) {
case 0: $classRegionRow = "regionTop"; break;
case 1: $classRegionRow = "regionMiddle"; break;
case 2: $classRegionRow = "regionBottom"; break;
}
switch($column%3) {
case 0: $classRegionColumn = "regionLeft"; break;
case 1: $classRegionColumn = "regionCenter"; break;
case 2: $classRegionColumn = "regionRight"; break;
}
$value = $gridStr[9*$row+$column];
if ($value == "?") {
$value = "";
@ -43,7 +33,7 @@
} else {
$disabled = " disabled";
}
echo " <td class='$classRegionRow $classRegionColumn'><input type='text' inputmode='numeric' minlength=0 maxlength=1 value='$value'$disabled/></td>\n";
echo " <td><input type='text' inputmode='numeric' minlength=0 maxlength=1 value='$value'$disabled/></td>\n";
}
?>
</tr>

54
style.css
View File

@ -16,83 +16,69 @@ div {
table {
border-spacing: 0;
border: 1px solid black;
border-radius: 6px;
}
td, tr {
padding: 0;
}
table tr:first-child td:first-child {
border-top-left-radius: 6px;
tr:first-child td:first-child {
border-top-left-radius: 5px;
}
table tr:first-child td:first-child > input {
tr:first-child td:first-child input {
border-top-left-radius: 4px;
}
table tr:first-child td {
border-top: 2px solid black;
tr:first-child td:last-child {
border-top-right-radius: 5px;
}
table tr:first-child td:last-child {
border-top-right-radius: 6px;
}
table tr:first-child td:last-child > input {
tr:first-child td:last-child input {
border-top-right-radius: 4px;
}
table tr td:first-child {
border-left: 2px solid black;
tr:last-child td:first-child {
border-bottom-left-radius: 5px;
}
table tr td:last-child {
border-right: 2px solid black;
}
table tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
table tr:last-child td:first-child > input {
tr:last-child td:first-child > input {
border-bottom-left-radius: 4px;
}
table tr:last-child td {
border-bottom: 2px solid black;
tr:last-child td:last-child {
border-bottom-right-radius: 5px;
}
table tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
table tr:last-child td:last-child > input {
tr:last-child td:last-child input {
border-bottom-right-radius: 4px;
}
.regionTop {
tr:nth-child(3n+1) td {
border-top: 1px solid black;
}
.regionMiddle {
tr:nth-child(3n+2) td {
border-top: 1px solid grey;
border-bottom: 1px solid grey;
}
.regionBottom {
tr:nth-child(3n) td {
border-bottom: 1px solid black;
}
.regionLeft {
td:nth-child(3n+1) {
border-left: 1px solid black;
}
.regionCenter {
td:nth-child(3n+2) {
border-left: 1px solid grey;
border-right: 1px solid grey;
}
.regionRight {
td:nth-child(3n+3) {
border-right: 1px solid black;
}