선형 그라디언트보다 인쇄 할 수있는 요소는 무엇입니까?

Question

나는이 DnD 애플리케이션에서 CSS "linear-gradient"를 사용하여 사각 지대가있는 사용자를 보여줍니다.

그것은 다음과 같다 :
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> 

사업부 (선형 구배)에 흰색 영역은 동적 및 폭하고 왼쪽 다른 여유를 가질 수있다.

인쇄 할 수 있으면 좋을 수 있습니다. 항상. 내 응용 프로그램의 상점에서

, 그것은 인쇄 미리보기에서 다음과 같습니다

내가이 흰색 반점을 관리 할 수있는 더 좋은 방법이 있나요?
텍스트 (배경을 사용하는 이유)가 뒤따라야하며 모든 브라우저에서 인쇄해야합니다.

마비 내가 테이블 셀을 사용할 수 있습니까? (테두리가있는 td)하지만 동적 인 "div"는 어떤 위치에서도 div에 끌어다 놓을 수 있습니까?

아이디어가 있으십니까?
https://jsfiddle.net/0apuqnxd/27/

UPDATE
테이블 셀이 실제로 작동 할 수 있습니다 :

이 내 응용 프로그램의 작은 예입니다. 그러나 드래그 이뤄져은 div's이처럼 "고스트"..
https://jsfiddle.net/0apuqnxd/34/

을 남겨

Answer 1

열 병합은 트릭을 할 것입니다

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>