css - 突出显示表中的字段并打印

标签 css

有谁知道如何用黄色突出显示表格中的字段并打印黄色?这会在屏幕上突出显示,但不会打印黄色:
<td style="background-color: yellow">Total:</td>

我发现浏览器在设计上不会打印背景颜色。我能找到的唯一解决方法是您可以为单元格或 div 制作超粗边框:
<td style="border-left: 999px solid yellow">

不幸的是,单元格内容不会覆盖黄色粗边框。我在网上到处查看,我能找到的最接近的答案是堆栈溢出: Best Ways to Get Around CSS Backgrounds Not Printing

但是,答案未经测试,我无法在我的计算机上运行它。我试过玩弄和试验,但没有运气。

最佳答案

好的,我找到了解决我的问题的方法,但这个解决方法并不优雅。就像我在上面的问题中所说的那样,您已经创建了一个带有大颜色边框的 div 标签。问题是彩色边框可以正确打印。然后,在显示高亮颜色的地方,放置另一个 div 标签,上面有文本。不优雅,但它有效。

最好将文本 div 和突出显示 div 都设置在第三个“外部”div 中,以便于放置。内部 div 的位置应为“绝对”,外部 div 的位置应为“相对”。示例代码如下。这是在 Chrome 和 Firefox 上测试过的代码:

<style type="text/css">
  #outer_box {
      position: relative; 
      border: 2px solid black; 
      width: 500px; 
      height:300px; 
  }

  #yellow_highlight {
      position: absolute; 
      width: 0px;
      height: 30px;
      border-left: 300px;
      border-color: yellow; 
      border-style: solid; 
      top: 0; 
      left: 0px
  }


  #message_text {
      position: absolute; 
      top: 0; 
      left: 0px;
  }
</style>

<body>
  <div id="outer_box">
    <div id="yellow_highlight">&nbsp;</div>
    <div id="message_text">hello, world!</div>
  </div>
</body>

关于css - 突出显示表中的字段并打印,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9652431/

相关文章:

css - Angular 6 : Update NG Style with function

html - iPhone 在 Safari 中不显示字体

html - 带有 justify-content :space-evenly, 的 100% 宽度 flex 水平列表如何将元素符号居中放置在空格中?

javascript - 当部分到达页面顶部时动态添加类

javascript - 带有顶部、底部和溢出的侧边导航

javascript - 在 Safari 中禁用 flex 滚动

javascript - 将 <img> 替换为父元素的 CSS 背景图片(使用 jQuery 将样式与内容分开)

javascript - Safari 浏览器无法处理 Click 事件以显示加载图像

html - 在左侧和右侧裁剪图像

html - 设置完整的背景图像