Quel élément imprimable est préférable d'utiliser linéaire-gradient?

Question

J'ai cette application DnD où j'utilise CSS "linéaire-gradient" pour montrer à l'utilisateur où un point aveugle est.

Il ressemble à ceci:
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> 

La zone blanche dans la div (linéaire gradient) est dynamique et peut être une largeur et disposer d'une marge différente de la gauche.

Cela pourrait être très bien si c'était imprimable. Toujours.

Dans ma demande tho, il ressemble à ceci dans l'aperçu avant impression:

Y at-il une meilleure façon que je peux gérer cette tache blanche?
Il doit aller derrière le texte (c'est pourquoi j'utilise l'arrière-plan), et il doit imprimer dans tous les navigateurs.

Maby je peux utiliser une cellule de table? (td with borders) Mais comment dynamiser un "td" pour glisser-déposer dans un div, dans n'importe quelle position?

Des idées?

C'est un petit exemple de ma demande:
https://jsfiddle.net/0apuqnxd/27/

MISE À JOUR
Une cellule de table peut effectivement fonctionner. Mais les laissent glisser ne le ferai pas un "fantôme" que les div's ne ..
https://jsfiddle.net/0apuqnxd/34/

Answer 1

COLSPAN fera l'affaire

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>