html - 如何使用 CSS 格式化 HTML 表格进行打印？

Question

我想使用 CSS 格式化表格以显示出勤表。如何将 CSS 样式添加到表格以便打印？

score 4 · Accepted Answer

使用以下 CSS

table, th, td
{
  border-collapse:collapse;
  border: 1px solid black;
  width:100%;
  text-align:right;
}

您也可以使用 media="print" 打印特定布局

score 4 · Accepted Answer

在您的样式表中，使用

@media print {
  /* put your CSS rules if they are to apply in print only */
}

例如，

@media print {
   * { color: black; background: white; }
   table { font-size: 80%; }
}

详细信息取决于您希望在打印特定表格时遇到的问题类型。通常，如果您设置了固定的列宽（例如以像素为单位），您可能需要重新考虑您设计的这一部分。如果您使用颜色来传达重要信息（例如，红色单元格代表缺席，绿色代表出席），您需要重新考虑这个决定。

score 2 · Accepted Answer

2

使用media="print"CSS 样式表的属性来打印特定的布局。

于 2012-07-20T05:00:34.470 回答

score 2 · Accepted Answer

您可以使用 @media 规则将特定于媒体的 css 样式添加到页面

例如，@media screen将样式用于计算机屏幕并@media print用于打印机。

using@media all将确保您的样式应用于所有媒体类型设备

点击链接了解更多关于媒体类型的信息

score 1 · Accepted Answer

纠正所有好的答案。

我要做的是制作一个特定的 css 文件仅用于打印并将其附加到页面：

<link href='/css/theme-print.css' rel='stylesheet' media="print" type='text/css' />

score 1 · Accepted Answer

1

你也可以使用

body {
-webkit-print-color-adjust:exact;
}

于 2018-03-22T13:03:22.523 回答

6 回答 6