I am making a table that has sticky header and left column. It has thead, tbody and tfoot. I noticed that sometimes the background color for the thead does not show up. I want the thead to show on the top of every page when printing, but also to show its background-color.
Here is the whole "test.html" code that displays the problem in Chrome. Note: It needs a jquery reference.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
body {
margin:0;
font-family:Roboto, sans-serif, Arial;
font-size:14px;
/*white-space:nowrap;*/
}
.dd_table_wrapper {
position:relative;
-webkit-print-color-adjust: exact;
}
.dd_table_wrapper > table {
border-collapse:collapse;
min-width:100%;
}
.dd_table_wrapper > table > thead > tr > th,
.dd_table_wrapper > table > tbody > tr > td,
.dd_table_wrapper > table > tfoot > tr > td {
border:1px solid #dddddd;
padding:10px;
vertical-align: top;
}
.dd_table_wrapper > table > thead > tr > th {
font-weight:normal;
text-align:left;
}
.dd_table_wrapper > table > thead > tr > th.dd_table_sub_category,
.dd_table_wrapper > table > tbody > tr > td.dd_table_sub_category,
.dd_table_wrapper > table > tfoot > tr > td.dd_table_sub_category,
.dd_table_wrapper > table > thead > tr > th.dd_first_column:not(.dd_table_category):not(.dd_table_sub_category),
.dd_table_wrapper > table > tbody > tr > td.dd_first_column:not(.dd_table_category):not(.dd_table_sub_category),
.dd_table_wrapper > table > tfoot > tr > td.dd_first_column:not(.dd_table_category):not(.dd_table_sub_category) {
font-weight:bold;
}
.dd_table_wrapper .dd_table_category {
background-color:#6f3091;
color:white;
}
.dd_table_wrapper .dd_table_sub_category {
background-color:#bdbdbd;
}
.dd_table_wrapper .dd_table_even_row {
background-color:#fcfcfc;
}
.dd_table_wrapper .dd_table_odd_row {
background-color:#f4f4f4;
}
@media print {
.dd_table_wrapper > table > thead {
border-bottom:2px solid #6f3091;
}
.dd_table_wrapper > table > tfoot {
border-top:2px solid #6f3091;
}
/* adjust font size */
.dd_table_wrapper,
.dd_table_wrapper > table > thead > tr > th.dd_table_cell span,
.dd_table_wrapper > table > tbody > tr > td.dd_table_cell span,
.dd_table_wrapper > table > tfoot > tr > td.dd_table_cell span {
font-size:10px !important;
line-height:13px;
}
}
@media screen {
.dd_table_wrapper .dd_first_column {
width:200px;
}
.dd_table_wrapper > table > thead > tr > th,
.dd_table_wrapper > table > tbody > tr > td,
.dd_table_wrapper > table > tfoot > tr > td {
position:relative;
}
.dd_table_wrapper > table > thead > tr > th:before,
.dd_table_wrapper > table > tbody > tr > td:before,
.dd_table_wrapper > table > tfoot > tr > td:before {
content:'';
width:calc(100% + 2px);
height:calc(100% + 2px);
position:absolute;
left:-1px;
top:-1px;
border:1px solid #dddddd;
pointer-events: none;
}
.dd_table_wrapper.dd_table_sticky > table > thead > tr > th,
.dd_table_wrapper.dd_table_sticky > table > tbody > tr > td.dd_table_category,
.dd_table_wrapper.dd_table_sticky > table > tfoot > tr > td.dd_table_category,
.dd_table_wrapper.dd_table_sticky > table > tbody > tr > td.dd_table_sub_category,
.dd_table_wrapper.dd_table_sticky > table > tfoot > tr > td.dd_table_sub_category {
position:sticky;
}
.dd_table_wrapper.dd_table_sticky_left > table > thead > tr > th:first-child,
.dd_table_wrapper.dd_table_sticky_left > table > tbody > tr > td:first-child,
.dd_table_wrapper.dd_table_sticky_left > table > tfoot > tr > td:first-child {
position:sticky;
left:0;
}
}
</style>
</head>
<body>
<div class="dd_table_wrapper">
</div>
<script>
var data = {
header : [
{
category : ['HA', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
data : [
{
sub_category : ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
data : [
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L']
]
}
]
}
],
body : [
{
category : ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
data : [
{
sub_category : ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
data : [
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L']
]
},
{
sub_category : ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
data : [
['A', 'B', 'C', 'D', 'E', 'F', 'Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragraph. A paragraph is defined as “a group of sentences or a single sentence that forms a unit” (Lunsford and Connors 116). Length and appearance do not determine whether a section in a paper is a paragraph. For instance, in some styles of writing, particularly journalistic styles, a paragraph can be just one sentence long. Ultimately, a paragraph is a sentence or group of sentences that support one main idea. In this handout, we will refer to this as the “controlling idea,” because it controls what happens in the rest of the paragraph. Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragraph. A paragraph is defined as “a group of sentences or a single sentence that forms a unit” (Lunsford and Connors 116). Length and appearance do not determine whether a section in a paper is a paragraph. For instance, in some styles of writing, particularly journalistic styles, a paragraph can be just one sentence long. Ultimately, a paragraph is a sentence or group of sentences that support one main idea. In this handout, we will refer to this as the “controlling idea,” because it controls what happens in the rest of the paragraph. Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragraph. A paragraph is defined as “a group of sentences or a single sentence that forms a unit” (Lunsford and Connors 116). Length and appearance do not determine whether a section in a paper is a paragraph. For instance, in some styles of writing, particularly journalistic styles, a paragraph can be just one sentence long. Ultimately, a paragraph is a sentence or group of sentences that support one main idea. In this handout, we will refer to this as the “controlling idea,” because it controls what happens in the rest of the paragraph. Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragraph. A paragraph is defined as “a group of sentences or a single sentence that forms a unit” (Lunsford and Connors 116). Length and appearance do not determine whether a section in a paper is a paragraph. For instance, in some styles of writing, particularly journalistic styles, a paragraph can be just one sentence long. Ultimately, a paragraph is a sentence or group of sentences that support one main idea. In this handout, we will refer to this as the “controlling idea,” because it controls what happens in the rest of the paragraph. Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragraph. A paragraph is defined as “a group of sentences or a single sentence that forms a unit” (Lunsford and Connors 116). Length and appearance do not determine whether a section in a paper is a paragraph. For instance, in some styles of writing, particularly journalistic styles, a paragraph can be just one sentence long. Ultimately, a paragraph is a sentence or group of sentences that support one main idea. In this handout, we will refer to this as the “controlling idea,” because it controls what happens in the rest of the paragraph. Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragraph. A paragraph is defined as “a group of sentences or a single sentence that forms a unit” (Lunsford and Connors 116). Length and appearance do not determine whether a section in a paper is a paragraph. For instance, in some styles of writing, particularly journalistic styles, a paragraph can be just one sentence long. Ultimately, a paragraph is a sentence or group of sentences that support one main idea. In this handout, we will refer to this as the “controlling idea,” because it controls what happens in the rest of the paragraph. Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragraph. A paragraph is defined as “a group of sentences or a single sentence that forms a unit” (Lunsford and Connors 116). Length and appearance do not determine whether a section in a paper is a paragraph. For instance, in some styles of writing, particularly journalistic styles, a paragraph can be just one sentence long. Ultimately, a paragraph is a sentence or group of sentences that support one main idea. In this handout, we will refer to this as the “controlling idea,” because it controls what happens in the rest of the paragraph.', 'H', 'I', 'J', 'K', 'L'],
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L']
]
}
]
},
{
category : ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
data : [
{
sub_category : [],
data : [
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L']
]
}
]
}
],
footer : [
{
category : ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
data : [
{
sub_category : [],
data : [
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L']
]
}
]
}
]
};
function DD_Table(selector, data, center_titles, sticky_headers, sticky_left, top_offset) {
var index = -3;
var cls = sticky_left ? " dd_first_column" : "";
function j(tag, x) {
index += 3;
return "<tr class=\"dd_table_row\">" +
x.category.map(function(x, i) {
return "<" + tag + " style=\"z-index:" + (index+2) + "\" class=\"dd_table_cell dd_table_category" + (i==0 ? cls : "") + "\">" + x + "</" + tag + ">";
}).join('') +
"</tr>" +
x.data.map(function(c) {
return "<tr class=\"dd_table_row\">" +
c.sub_category.map(function(x, i) {
return "<" + tag + " style=\"z-index:" + (index+1) + "\" class=\"dd_table_cell dd_table_sub_category" + (i==0 ? cls : "") + "\">" + x + "</" + tag + ">";
}).join('') +
"</tr>" +
c.data.map(function(x, i) {
var even = (i + 1) % 2 == 0;
return "<tr class=\"dd_table_row\">" + x.map(function(x, i) {
var c = !even && center_titles ? "text-align:center;" : "";
return "<" + tag + " style=\"z-index:" + index + ";" + c + "\" class=\"dd_table_cell " + (even ? "dd_table_even_row" : "dd_table_odd_row") + (i==0 ? cls : "") + "\">" + x + "</" + tag + ">";
}).join('') + "</tr>";
}).join('');
}).join('');
}
function h(x) {
return j("th", x);
}
function g(x) {
return j("td", x);
}
$(selector).html('<table><thead>' + data.header.map(h).join('') + '</thead>' + '<tbody>' + data.body.map(g).join('') + '</tbody>' + '<tfoot>' + data.footer.map(g).join('') + '</tfoot></table>');
$(selector).find("> table > thead > tr > th").each(function(i,x){$(x).css('z-index', 3 + index + parseInt($(x).css('z-index'),10));});
$(selector).find("> table > thead > tr > th:first-child, > table > tbody > tr > td:first-child, > table > tfoot > tr > td:first-child").each(function(i,x){$(x).css('z-index',1+parseInt($(x).css('z-index'),10));});
if (sticky_left) {
$(selector).addClass("dd_table_sticky_left");
}
if (sticky_headers) {
$(selector).find("> table > thead > tr > th").each(function(i, x) {
$(x).css('top', top_offset + $(x).position().top);
});
var top = null;
$(selector).find("> table > tbody > tr > td.dd_table_category, > table > tfoot > tr > td.dd_table_category").each(function(i, x) {
if (top == null) top = $(x).position().top;
$(x).css('top', top_offset + top);
});
var top2 = null;
$(selector).find("> table > tbody > tr > td.dd_table_sub_category, > table > tfoot > tr > td.dd_table_sub_category").each(function(i, x) {
if (top2 == null) top2 = $(x).position().top;
$(x).css('top', top_offset + top2);
});
$(selector).addClass("dd_table_sticky");
}
}
DD_Table(".dd_table_wrapper", data, true, true, true, 0);
</script>
</body>
</html>
Here is a snippet of how it looks in print preview in chrome
Header on page 1
Header on page 2. Here we see that the text is there in white color, but the background color does not show.
Does anyone know what's wrong?
Thanks
