哪种可打印元素比线性渐变更好地使用? [英] What printable element is better to use than linear-gradient?

问题描述

我有这个DnD应用程序，我在其中使用CSS线性渐变"向用户显示盲点.

I have this DnD application where i use CSS "linear-gradient" to show the user where a blind spot is.

它看起来像这样:
https://jsfiddle.net/y03q0zmn/1/

It looks like this:
https://jsfiddle.net/y03q0zmn/1/

<div class="elementsDiv ui-draggable ui-draggable-handle" id="29065-1_104" data-weight="945" data-nr="104" style="width: 159.5px; height: 20px; background: linear-gradient(to right, rgb(194, 194, 214) 0%, 24.2px, rgba(0, 0, 0, 0) 24.2px, rgba(0, 0, 0, 0) 115.2px, rgb(194, 194, 214) 115.2px, rgb(194, 194, 214) 100%); position: absolute; left: 118px; top: 72.2px;"><span class="elementDivNr">104<span class="elementDivWeight"></span></span><span class="elementOppning"></span></div>

div(线性渐变)中的白色区域是动态的，可以是任意宽度，并且左侧具有不同的边距.

The white area in the div (linear-gradient) is dynamic and can be any width and have different margin to the left.

如果可以打印，那就很好了.总是.

This could be just fine if it was printable. Always.

在我的应用程序中，它在打印预览中看起来像这样:

In my application tho, it looks like this in the print preview:

我有什么更好的方法可以管理这个白点?
它必须在文本后面(这就是为什么我使用背景)，并且必须在所有浏览器中打印.

Is there any better way i can manage this white spot?
It has to go behind the text (Thats why i use Background), and it has to print in all browsers.

Maby我可以使用表格单元格吗? (带有边框的td)但是"td"在div中任意位置拖放的动态性如何?

Maby i can use a table cell? (td with borders) But how dynamic is a "td" to drag and drop in a div, in any position?

有什么想法吗?

这是我的应用程序的一个小示例:
https://jsfiddle.net/0apuqnxd/27/

This is an small example of my application:
https://jsfiddle.net/0apuqnxd/27/

更新
表格单元格可能实际上可以工作.但是阻力不会像div那样留下鬼影"..
https://jsfiddle.net/0apuqnxd/34/

UPDATE
A table cell might actually work. But the drag won´t leave a "ghost" as the div´s does..
https://jsfiddle.net/0apuqnxd/34/

推荐答案

COLSPAN可以解决问题

COLSPAN will do the trick

table{
  border: 1px solid RED;
}
td{
  border: 1px solid BLUE;

}

    <table>
      <tr>
        <td colspan="3"> This is main heading</td>
      </tr>
      <tr>
        <td width="50px">LEFT1</td>
        <td width="50px">Middle1</td>
        <td width="50px">RIGHT1</td>
      </tr>
       <tr>
        <td width="50px">LEFT2</td>
        <td width="50px">Middle2</td>
        <td width="50px">RIGHT2</td>
      </tr>
    </table>

这篇关于哪种可打印元素比线性渐变更好地使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！