Outer Table Layout

Open the jpf_sudoku.css file. Start by creating styles for the outer table. Go to the Table Styles section and create a style rule for the table element of the spuzzle class that:

• sets the table borders to collapse,
• sets the top/bottom margins to 0 pixels and the left/right margins to auto , and
• sets the width to 90%.

Outer Table Elements

For every td element, create a style rule that:

• adds a 5-pixel outset gray border and
• sets the width to 33.3%

For every th element, create a style rule that:

• sets the font color to gray and
• sets the right and bottom padding space to 10 pixels.

Inner Table Layout

Next, you create styles for the inner table that is placed within each cell of the outer table. Go to the Inner Table Styles section and create a style rule for the table element of the subTable class that:

• sets the table borders to collapse and
• sets the width to 100%

Inner Table Elements

For every td element within the subTable table, create a style rule that:

• adds an inset box shadow with offset values of 0 pixels in the horizontal and vertical directions with a blur of 15 pixels,
• adds a 1-pixel solid black border,
• displays the text in a blue font,
• sets the cell height to 40 pixels, and
• centers the cell text in the horizontal and vertical directions.

For every td element that is nested within a td element of the goldBox class, create a style rule that sets the background color to rgb(228, 199, 42).

For every td element that is nested within a td element of the greenBox class, create a style rule that sets the background color to rgb(203, 229, 130).

-----------------------------

My code:

table.spuzzle {

border-collapse: collapse;

margin-top: 0px;

margin-bottom: 0px;

margin-left: 0px;

margin-right: 0px;

width: 90%;

}

table.spuzzle > td {

border: 5px outset gray;

width: 33.3%;

}

table.spuzzle > th {

color: gray;

padding: 10px;

}

/* Inner Table Styles */

table.subTable th {

border-collapse: collapse;

width: 100%;

}

table.subTable td {

box-shadow: 0px 0px 15px inset;

border: 1px solid black;

color: blue;

height: 40px;

text-align: center;

vertical-align: middle;

}

td.goldBox {

background-color: rgb(228, 199, 42);

}

td.greenBox {

background-color: rgb(203, 229, 130);

}

-----------------------------

Current:

-----------------------------

Solution:

I'm assuming since this table is not formatting correctly that it's ruining the rest of the code, if the rest of the code is correctly done.

EDIT: I fixed it on my own.

Sudoku 1 2 3 4 5 6 7 8 9 A 7 453 31 B 453 31 c352 6 92 937 4729 4 8 1 52 G H 45 81 1 16 1 2 3 Sudoku 4 5 6 7 8 9 NW MUWLUI - 472 52 Sudoku 1 2 3 4 5 6 7 8 9 A 7 453 31 B 453 31 c352 6 92 937 4729 4 8 1 52 G H 45 81 1 16 1 2 3 Sudoku 4 5 6 7 8 9 NW MUWLUI - 472 52