css - 哪种可打印元素比线性渐变更好用？

Question

我有这个 DnD 应用程序，我在其中使用 CSS“线性渐变”向用户显示盲点所在的位置。

看起来像这样:
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 中的白色区域(线性渐变)是动态的，可以是任意宽度，并且左边距不同。

如果它是可打印的，这可能会很好。总是。

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

有没有更好的方法来管理这个白点？
它必须位于文本后面(这就是我使用背景的原因)，并且必须在所有浏览器中打印。

我可以使用表格单元格吗？ (带边框的 td)但是将“td”拖放到 div 中任何位置的动态性如何？

有什么想法吗？

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

更新
表格单元格可能确实有效。但是拖动不会像 div 那样留下“幽灵”..
https://jsfiddle.net/0apuqnxd/34/

Answer 1

COLSPAN 可以解决问题

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>