表格打印时未显示的背景颜色
我正在创建一个具有粘性标题和左列的表。它有thead，tbody和tfoot。我注意到有时候thead的背景颜色没有显示出来。我希望thead在打印时显示在每个页面的顶部，还要显示其背景颜色。
这是整个＆＃34; test.html＆＃34;在Chrome中显示问题的代码。注意：它需要一个jquery引用。
<!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>
以下是Chrome中打印预览的外观片段
第1页的标题
第2页的页眉。在这里，我们看到文本是白色的，但背景颜色没有显示。
有谁知道错误是什么？
由于
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？