What printable element is better to use than linea

问题:

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

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>

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 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?

Any ideas?

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

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/

回答1:

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>