HTML5 and CSS - Something must be wrong with my rowspan and colspan - css

This is supposed to be a sudoku table. I checked the css elements and everything appears to be in good working order. I think that I made mistakes in the colspan and rowspan in the table. The "greenBox and "goldBox" classes should make the background images span across 3 rows and 3 columns; however, in the sudoku 9x9 table only 9 squares are filled with the background images. Any help is greatly appreciated. Thank you for your time.
<table class="spuzzle">
<caption>Sudoku</caption>
<thead>
<tr>
<th> </th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
</tr>
</thead>
<tbody>
<tr>
<th>A</th>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td> </td>
<td>4</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>5</td>
<td> </td>
</tr>
</table>
</td>
<td class="goldBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td>5</td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td>7</td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>1</td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<th>B</th>
</tr>
<tr>
<th>C</th>
</tr>
<tr>
<th>D</th>
<td class="goldBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>6</td>
<td> </td>
<td>9</td>
</tr>
<tr>
<td>4</td>
<td>7</td>
<td>2</td>
</tr>
</table>
</td>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td>2</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>9</td>
<td> </td>
</tr>
</table>
</td>
<td class="goldBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td>9</td>
<td>3</td>
<td>7</td>
</tr>
<tr>
<td>4</td>
<td> </td>
<td>8</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<th>E</th>
</tr>
<tr>
<th>F</th>
</tr>
<tr>
<th>G</th>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td> </td>
<td>1</td>
</tr>
<tr>
<td> </td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td> </td>
<td>6</td>
<td> </td>
</tr>
</table>
</td>
<td class="goldBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>8</td>
<td> </td>
<td>1</td>
</tr>
</table>
</td>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>7</td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<th>H</th>
</tr>
<tr>
<th>I</th>
</tr>
</tbody>
`
</table>
The CSS is posted below. But I believe that it's functioning as it should.
table.spuzzle
{
border-collapse:collapse;
}
table.subTable
{
border-collapse:collapse;
}
table.spuzzle td
{
border:5px outset gray;
}
table.spuzzle th
{
font-size:8px;
color:gray;
}
tbody th
{
height:40px;
}
table.subTable td
{
font-size:20px;
color:blue;
width:40px;
height:40px;
text-align:center;
vertical-align:middle;
border:1px solid black;
}
td.goldBox
{
background-image:url("gold.jpg");
background-position:center center;
background-repeat:no-repeat;
}
td.greenBox
{
background-image:url("green.jpg");
background-position:center center;
background-repeat:no-repeat;
}

It appears your background images aren't large enough.
Try replacing images with background color to see if the basic affect is right then, look at what is going wrong with the images, perhaps remove background-repeat:no-repeat;. See http://jsfiddle.net/d6ZNF/1/ for using solid colors.
When debugging, also keep in mind that CSS is case-sensitive. I also recommend using a tool like Firebug for Firefox (free download) or developer tools in Chrome (hit F12) to inspect the suspect elements and see what, if any, CSS classes are applied to them.

Related

CSS3 Alternate table background color based on table row class

There should be a good way to alternate table row background colors based on class. Currently, I'm just doing something like this:
/* Staff Table */
table#user_provisioning .bpink { background-color: lavenderblush; }
table#user_provisioning .fred { color: red; }
table#user_provisioning tr.Administrators, tr.ProfessionalStaff { background-color: honeydew; }
table#user_provisioning tr.Deans, tr.SupportStaff { background-color: white; }
table#user_provisioning td { text-align: left; }
I would think there's a way to do something like:
table#user_provisioning tr.{foreach class}:nth-child(odd) { background-color: honeydew; }
Unfortunately, I'm not sure how to include all tr classes for the table and go even/odd based on that.
Suggestions?
Edit: Adding snipped/edited page code
table#table_organization tr.unsure,
tr.dept,
tr.org {
background-color: honeydew;
}
table#table_organization tr.board,
tr.prog,
tr.ssa {
background-color: white;
}
<section>
<h1> Organization </h1>
<table id="table_organization" class="sortable">
<tr>
<th> Dept. </th>
</tr>
<tr class="unsure">
<td> - </td>
</tr>
<tr class="board">
<td> Board </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
</table>
</section>
Unfortunately CSS does not have a :nth-of-class pseudo selector. As long as the number of rows is very limited, using the adjacent sibling selector + could help (showing only for .dept):
.dept {
background: yellow;
}
.dept+.dept {
background-color: orange;
}
.dept+.dept+.dept {
background-color: red;
}
<table id="table_organization" class="sortable">
<tr>
<th> Dept. </th>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
</table>
table#table_organization tr.unsure,
tr.dept:nth-of-type(odd),
tr.org {
background-color: honeydew;
}
tr.dept:nth-of-type(even){
background-color: red;
}
table#table_organization tr.board,
tr.prog,
tr.ssa {
background-color: white;
}
<section>
<h1> Organization </h1>
<table id="table_organization" class="sortable">
<tr>
<th> Dept. </th>
</tr>
<tr class="unsure">
<td> - </td>
</tr>
<tr class="board">
<td> Board </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
</table>
</section>

How to create custom table with different cells?

It should be like
It should be 4 rows and 3 colums. In first column centrall cell takes 2 cells. In second it should be 1 row. And third the same as first
I have this code
<table border="1" width="100%">
<thead></thead>
<tbody>
<tr>
<td>1</td>
<td rowspan="4">2</td>
<td>3</td>
</tr>
<tr>
<td rowspawn="2">4</td>
<td rowspawn="2">5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
But it looks like this
I am not 100% sure what you are after however, does this give you what you want?
<table border="1" width="100%">
<thead></thead>
<tbody>
<tr>
<td>1</td>
<td rowspan="4">2</td>
<td>3</td>
</tr>
<tr>
<td style="height:200px;" rowspawn="2">4</td>
<td rowspawn="2">5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
<table height="200px" width="900px" border="1px solid black">
<tr>
<td></td>
<td rowspan="4"></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Try this code. It Works.

Aligning the table to the top of the page

Here is the plunk below, I'm trying to push the internal table to the top of the page tried different CSS but it doesn't get aligned to the top.
<td width="30%">
<div>
<h4>Category properties</h4>
<table style=>
<tbody>
<tr>
<td>
Name
</td>
<td>
{{selectedCategory.name}}
</td>
</tr>
<tr>
<td>Source</td>
<td>{{selectedCategory.source}}</td>
</tr>
<tr>
<td>Tenancy</td>
<td>{{selectedCategory.tenancy}}</td>
</tr>
<tr>
<td>Display Name</td>
<td>{{selectedCategory.displayName}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
http://plnkr.co/edit/C4vDxt09kmLPUPQNssL4?p=preview

Currency table in CSS

I have a table and I need to format the currency in order for the . to be displayed always under each other.
This is the table:
<table class="data" cellspacing="0" cellpadding="5" border="0">
<thead>
<tr>
<th>Date</th>
<th>Description</th>
<th>Field1</th>
<th>Field2</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr class="verticalDivider"></tr>
<tr>
<td>08 April 2010</td>
<td>value 1</td>
<td>GBP 20.00</td>
<td> </td>
<td>GBP 20.00</td>
</tr>
<tr>
<td>08 May 2010</td>
<td>value 2</td>
<td>GBP 100.00</td>
<td> </td>
<td>GBP 1020.00</td>
</tr>
<tr>
<td>19 May 2010</td>
<td>value 3</td>
<td> </td>
<td>GBP 50.00</td>
<td>GBP 970.00</td>
</tr>
</tbody>
</table>
How can I achieve this?
How does this look?
<style type="text/css">
.price {
text-align: right;
}
</style>
<table class="data" cellspacing="0" cellpadding="5" border="0">
<thead>
<tr>
<th>Date</th>
<th>Description</th>
<th>Field1</th>
<th>Field2</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr class="verticalDivider"></tr>
<tr>
<td>08 April 2010</td>
<td>value 1</td>
<td class="price">GBP 20.00</td>
<td> </td>
<td class="price">GBP 20.00</td>
</tr>
<tr>
<td>08 May 2010</td>
<td>value 2</td>
<td class="price">GBP 100.00</td>
<td> </td>
<td class="price">GBP 1020.00</td>
</tr>
<tr>
<td>19 May 2010</td>
<td>value 3</td>
<td> </td>
<td class="price">GBP 50.00</td>
<td class="price">GBP 970.00</td>
</tr>
</tbody>
</table>
assuming you'll always print 2 decimal digits, I would define all my table <col /> then I'd assign text-align : right to that cols that contain prices (and padding-right to create space from border)
otherwise as specified in http://www.w3.org/TR/html401/struct/tables.html#h-11.3.2 you could assign align="char" char="." to table cols (if you browser support it)
To have the currency symbol (GBP) AND the dots aligned you can do the following (tested on Chrome and Firefox, breaks on IE):
CSS file:
...
td.money {
text-align: right;
}
.currencySymbol {
float: left;
}
...
And your table cell would look like:
<td class="money">
<div class="currencySymbol">GBP</div>
970.00
</td>
Although it's dangerous (probably the reason why it breaks on IE), see: Is a DIV inside a TD a bad idea?
<td align="right">GBP 20.00</td>
<td align="right">GBP 100.00</td>
<td align="right"> </td>
I Guess thats what you are looking for as long as thee is ".00". If I were you, I would start using css even for this bit of code where you need to edit 3 places instead of one.

Repeat table headers in print mode

Is it possible in CSS using a property inside an #page to say that table headers (th) should be repeated on every page if the table spreads over multiple pages?
This is what the THEAD element is for. Official docs here.
Some browsers repeat the thead element on each page, as they are supposed to. Others need some help: Add this to your CSS:
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
Opera 7.5 and IE 5 won't repeat headers no matter what you try.
(source)
Flying Saucer xhtmlrenderer repeats the THEAD on every page of PDF output, if you add the following to your CSS:
table {
-fs-table-paginate: paginate;
}
(It works at least since the R8 release.)
UPDATE: It looks like this may have been fixed in 2016! https://bugs.chromium.org/p/chromium/issues/detail?id=24826#c45
Original Answer (2012):
Before you implement this solution it's important to know that Webkit currently doesn't do this.
Here is the relevant issue on the Chrome issue tracker: http://code.google.com/p/chromium/issues/detail?id=24826
And on the Webkit issue tracker: https://bugs.webkit.org/show_bug.cgi?id=17205
Star it on the Chrome issue tracker if you want to show that it is important to you (I did).
Chrome and Opera browsers do not support thead {display: table-header-group;} but rest of others support properly..
how do i print HTML table. Header and footer on each page
Also Work in Webkit Browsers
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function PrintPage() {
document.getElementById('print').style.display = 'none';
window.resizeTo(960, 600);
document.URL = "";
window.location.href = "";
window.print();
}
</script>
<style type="text/css" media="print">
#page
{
size: auto; /* auto is the initial value */
margin: 2mm 4mm 0mm 0mm; /* this affects the margin in the printer settings */
}
thead
{
display: table-header-group;
}
tfoot
{
display: table-footer-group;
}
</style>
<style type="text/css" media="screen">
thead
{
display: block;
}
tfoot
{
display: block;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width: 500px; margin: 0 auto;">
<thead>
<tr>
<td>
header comes here for each page
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
</tr>
<tr>
<td>
2
</td>
</tr>
<tr>
<td>
3
</td>
</tr>
<tr>
<td>
4
</td>
</tr>
<tr>
<td>
5
</td>
</tr>
<tr>
<td>
6
</td>
</tr>
<tr>
<td>
7
</td>
</tr>
<tr>
<td>
8
</td>
</tr>
<tr>
<td>
9
</td>
</tr>
<tr>
<td>
10
</td>
</tr>
<tr>
<td>
11
</td>
</tr>
<tr>
<td>
12
</td>
</tr>
<tr>
<td>
13
</td>
</tr>
<tr>
<td>
14
</td>
</tr>
<tr>
<td>
15
</td>
</tr>
<tr>
<td>
16
</td>
</tr>
<tr>
<td>
17
</td>
</tr>
<tr>
<td>
18
</td>
</tr>
<tr>
<td>
19
</td>
</tr>
<tr>
<td>
20
</td>
</tr>
<tr>
<td>
21
</td>
</tr>
<tr>
<td>
22
</td>
</tr>
<tr>
<td>
23
</td>
</tr>
<tr>
<td>
24
</td>
</tr>
<tr>
<td>
25
</td>
</tr>
<tr>
<td>
26
</td>
</tr>
<tr>
<td>
27
</td>
</tr>
<tr>
<td>
28
</td>
</tr>
<tr>
<td>
29
</td>
</tr>
<tr>
<td>
30
</td>
</tr>
<tr>
<td>
31
</td>
</tr>
<tr>
<td>
32
</td>
</tr>
<tr>
<td>
33
</td>
</tr>
<tr>
<td>
34
</td>
</tr>
<tr>
<td>
35
</td>
</tr>
<tr>
<td>
36
</td>
</tr>
<tr>
<td>
37
</td>
</tr>
<tr>
<td>
38
</td>
</tr>
<tr>
<td>
39
</td>
</tr>
<tr>
<td>
40
</td>
</tr>
<tr>
<td>
41
</td>
</tr>
<tr>
<td>
42
</td>
</tr>
<tr>
<td>
43
</td>
</tr>
<tr>
<td>
44
</td>
</tr>
<tr>
<td>
45
</td>
</tr>
<tr>
<td>
46
</td>
</tr>
<tr>
<td>
47
</td>
</tr>
<tr>
<td>
48
</td>
</tr>
<tr>
<td>
49
</td>
</tr>
<tr>
<td>
50
</td>
</tr>
<tr>
<td>
51
</td>
</tr>
<tr>
<td>
52
</td>
</tr>
<tr>
<td>
53
</td>
</tr>
<tr>
<td>
54
</td>
</tr>
<tr>
<td>
55
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
footer comes here for each page
</td>
</tr>
</tfoot>
</table>
</div>
<br clear="all" />
<input type="button" id="print" name="print" value="Print" onclick="javascript:PrintPage();"
class="button" />
</form>
</body>
</html>

Resources