I am taking my first web programming course but the instructor isn't much help. After trying to contact him for that past week I decided to look through the web for help and guidance.
My question is: how can I distinguish between the programmed Sudoku numbers and the empty cells that the user needs to fill in? Preferably, I would like to make the programmed cells to have a gray background while the empty cells to have no formatting.
Currently in my css file I have this:
table {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
text-align: center;
border-collapse: collapse;
}
td {
border: 1px solid #000;
width: 40px;
height: 40px;
}
tr:nth-child(1) td{
border-top-width: 3px;
}
td:nth-child(1) {
border-left-width: 3px;
}
td:nth-child(3), td:nth-child(6), td:nth-child(9){
border-right-width: 3px;
}
tr:nth-child(3) td, tr:nth-child(6) td, tr:nth-child(9) td{
border-bottom-width: 3px;
}
Here is my html file (not final formatting but gives an idea):
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<table>
<tr>
<td>Start Timer</td>
<td>Reset Timer </td>
<td>Timer:_________.</td>
</table>
<table>
<tr>
<td>2</td>
<td></td>
<td>8</td>
<td>3</td>
<td></td>
<td>5</td>
<td>7</td>
<td>1</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>7</td>
<td>1</td>
<td></td>
<td>2</td>
<td>8</td>
<td></td>
<td>4</td>
<td></td>
</tr>
<tr>
<td>9</td>
<td></td>
<td></td>
<td>7</td>
<td></td>
<td>1</td>
<td>5</td>
<td>8</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>8</td>
<td></td>
<td>5</td>
<td>3</td>
<td></td>
<td>1</td>
<td>7</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td>9</td>
<td></td>
<td></td>
<td></td>
<td>6</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>1</td>
<td>4</td>
<td></td>
<td>6</td>
<td></td>
<td>9</td>
<td></td>
<td>3</td>
</tr>
<tr>
<td></td>
<td>6</td>
<td>3</td>
<td></td>
<td>1</td>
<td>7</td>
<td>2</td>
<td>9</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>9</td>
<td></td>
<td>2</td>
<td>8</td>
<td>6</td>
<td></td>
<td>3</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>2</td>
<td></td>
<td>9</td>
<td></td>
<td>3</td>
<td>8</td>
<td>6</td>
<td></td>
</tr>
</table>
</body>
</html>
EDIT
So I added this to my CSS file and it actually works but I don't get why. Is this recommended. I know there is probably a handful of solutions to my question but is this an actual solution or did I get lucky that my project is actually working.
td {
border: 1px solid #000;
width: 40px;
height: 40px;
background-color: gray;
font-weight: bold;
empty-cells:
}
td:empty {
background-color: transparent;
}
add 2 class to td fill and empty
and if it cell is fill add class "fill" to it
td.fill{
background: #000;
}
td.empty{
background: transparent;
}
Related
I have html tables and I would like to add summary columns next to it.
I could create simple table, but I couldn't figure out how to set separate tables next to it.
My desired result is described below. If someone has idea, please let me know.
td {
border: solid 1px black;
padding:5px;
}
table {
border-collapse: collapse;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
Here you go with a solution
td {
border: solid 1px black;
padding:5px;
}
table {
border-collapse: collapse;
}
.noborder {
border: none;
padding: 5px 8px;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td class="noborder"></td>
<td>2</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td class="noborder"></td>
<td>2</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td class="noborder"></td>
<td>2</td>
</tr>
</table>
Rather than creating another table I will suggest to use the no-border cell.
Hope this will help you
According to your requirement, you actually do not need another table, but in future if you want to use table side by side then you can use below solution.
td {
border: solid 1px black;
padding:5px;
}
table {
border-collapse: collapse;
float:left;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<table style="margin-left:20px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
I got what I want as per the screenshot. However, the borders got attached to one another and got thicker. How do I maintain the border size?
This is actually what I'm planning to make it look like:
DEMO: https://jsfiddle.net/xnqh9d70/
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>Day</td>
<td>Sun.</td>
<td>Mon.</td>
<td>Tues.</td>
<td>Wed.</td>
<td>Thu.</td>
<td>Fri.</td>
<td>Sat.</td>
<td></td>
</tr>
<tr>
<td>Fare(s)</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td></td>
</tr>
<tr>
<td>Date(s)</td>
<td>9</td>
<td>8</td>
<td>7</td>
<td>6</td>
<td>5</td>
<td>4</td>
<td>3</td>
<td>2</td>
</tr>
</tbody>
</table>
CSS:
table {
border-collapse: separate;
empty-cells: hide;
border: 0;
border-color: #000000;
}
This is probably not the nicest solution, but what you can do is eliminate one of the two borders completely, only having borders on elements where it is needed then.
table {
border-collapse: separate;
empty-cells: hide;
border: 0;
border-color: #000000;
border-left: 1px solid black
}
tr {
border-bottom: none;
}
td {
border-left: none;
}
tr:last-of-type {
border-bottom: 1px solid black;
}
td:first-of-type {
border-right: 1px solid black;
}
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>Day</td>
<td>Sun.</td>
<td>Mon.</td>
<td>Tues.</td>
<td>Wed.</td>
<td>Thu.</td>
<td>Fri.</td>
<td>Sat.</td>
<td></td>
</tr>
<tr>
<td>Fare(s)</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td></td>
</tr>
<tr>
<td>Date(s)</td>
<td>9</td>
<td>8</td>
<td>7</td>
<td>6</td>
<td>5</td>
<td>4</td>
<td>3</td>
<td>2</td>
</tr>
</tbody>
</table>
The general way for creating borders between cells is by styling the td elements, and setting border-collapse: collapse; on the table.
I also added a class for your blank cells to remove the border on them.
table {
empty-cells: hide;
border-collapse: collapse;
border-color: #000000;
}
td {
border: 1px solid black;
}
.empty-cell {
border: none;
}
<table>
<tbody>
<tr>
<td>Day</td>
<td>Sun.</td>
<td>Mon.</td>
<td>Tues.</td>
<td>Wed.</td>
<td>Thu.</td>
<td>Fri.</td>
<td>Sat.</td>
<td class="empty-cell"></td>
</tr>
<tr>
<td>Fare(s)</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td class="empty-cell"></td>
</tr>
<tr>
<td>Date(s)</td>
<td>9</td>
<td>8</td>
<td>7</td>
<td>6</td>
<td>5</td>
<td>4</td>
<td>3</td>
<td>2</td>
</tr>
</tbody>
</table>
empty-cells: hide; is use to hide border
The empty-cells property sets whether or not to display borders on
empty cells in a table. Reference Here
you can apply css to td:empty for hide empty td
and for border-collapse: separate; case you need to add manually border-right to last td
table {
border-collapse: collapse;
border-color: #000000;
empty-cells: hide;
}
td {
border: 1px solid black;
}
td:empty {
border: 0px;
}
<table>
<tbody>
<tr>
<td>Day</td>
<td>Sun.</td>
<td>Mon.</td>
<td>Tues.</td>
<td>Wed.</td>
<td>Thu.</td>
<td>Fri.</td>
<td>Sat.</td>
<td></td>
</tr>
<tr>
<td>Fare(s)</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td></td>
</tr>
<tr>
<td>Date(s)</td>
<td>9</td>
<td>8</td>
<td>7</td>
<td>6</td>
<td>5</td>
<td>4</td>
<td>3</td>
<td>2</td>
</tr>
</tbody>
</table>
How can I make border 1px for table td. I have a table and I want to make the border 1px. Thank you!
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
You can use like this
table { border-collapse: collapse;}
for table.
And give
td {
border: 1px solid red;
}
You can use border-collapse for table with css.
Try This:
td {
border: 1px solid #000;
}
td {
border: 1px solid #000;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
Or
table {
border-collapse: collapse;
}
td {
border: 1px solid #000;
}
table {
border-collapse: collapse;
}
td {
border: 1px solid #000;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
You can define a CSS style for td.
This will affect all tables in HTML page.
<style>
td {
border:1px solid black
}
</style>
<table >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
Try like this :
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
I was hoping I could get some help with removing a table border from an "nested" (not sure if that is the proper terminology).
Here is what I have so far:
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>Five</th>
<th>Six</th>
<th>Seven</th>
<th>Eight</th>
<th>nine</th>
<th>ten</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr class="schedule-header">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
</tbody>
</table>
Here is the CSS:
.schedule-header {
background: #0062a1;
color: white;
border: none;
font-weight: bold;
}
Now I am getting all the styling I want except for the border: none; style.
Basically my plan is to use jquery to pop in this nested table when a dropdown arrow is clicked on the table row above, revealing relevant data.
Ok so I fixed the code and added the collapse to my css and it doesnt seem to be fixing it.
I wrote you a small function that will attach a display function to each sibling row that has a button, but I think you should do some more tutorials first, as you have many mistakes that just create more confusion.
Try doing some of the Tutorials on W3Schools to improve your CSS, HTML and eventually JQuery.
Good Luck ;)
<html>
<head>
<style>
.more_info {
background-color: #0062a1;
color: white;
font-weight: bold;
display:none;
}
table {
border-collapse: collapse;
}
button {
border-radius: 50%;
background-color: #0062a1;
color: white;
font-weight: bold;
}
</style>
<script src="jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function (){
var info_row = $(this).parent().parent().next();
info_row.toggle("slow");
});
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td><button>i</button></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr class="more_info">
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2">
<td><button>i</button></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr class="more_info">
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
Add border-collapse: collapse; to the CSS of your table:
table {
border-collapse: collapse;
}
JSFiddle
This table:
<table border="1">
<tbody><tr>
<td></td>
<td>Grokkability</td>
<td>PIA Factor*</td>
<td>FancyPantsiness</td>
</tr>
<tr>
<td>XML</td>
<td>10</td>
<td>8</td>
<td>2</td>
</tr>
<tr>
<td>Code</td>
<td>10</td>
<td>5</td>
<td>4</td>
</tr>
<tr>
<td>Auto-Wiring</td>
<td>2</td>
<td>2</td>
<td>10</td>
</tr>
</tbody></table>
...looks as I want it to on jsfiddle (http://jsfiddle.net/clayshannon/9AX8H/), but on Code Project it has lost its cell formatting (http://www.codeproject.com/Tips/711127/Swapping-Out-Concrete-Implementations-of-Interface)
What must I do to force the cell boundaries to be visible?
You probably want to use css..
<table class="border">
<tbody><tr>
<th></th>
<th>Grokkability</th>
<th>PIA Factor*</th>
<th>FancyPantsiness</th>
</tr>
<tr>
<th>XML</th>
<td>10</td>
<td>8</td>
<td>2</td>
</tr>
<tr>
<th>Code</th>
<td>10</td>
<td>5</td>
<td>4</td>
</tr>
<tr>
<th>Auto-Wiring</th>
<td>2</td>
<td>2</td>
<td>10</td>
</tr>
</tbody></table>
Your css
.border {
border: solid 1pt;
border-collapse:collapse;
}
.border th{
border: 1px solid #000000;
padding: 4px;
background-color: #34B767;
}
.border td{
border: 1px solid;
padding: 4px;
}