반응형웹에서 PC버전으로 프린트
본문
@media print{
body{margin:10px}
table { border-collapse: collapse; }
.no-print, .no-print * { display: none !important; }
}
@media (max-width: 768px) {
table th, table td {
width: calc(100%/2);
line-height:15px;
display: inline-block;
height: auto;
min-height: 30px;
}
}
위와 같이 반응형 웹페이지 CSS안에 프린트 미디어쿼리를 와 반응형 미디어 퉈리를 따로 주었는데 프린트 출력을 하니 출력물 테이블이 미디어쿼리 768px 버전이 적용이 되어서 출력이 됩니다.
해당 미디어쿼리 프린트에 반응형 미디어쿼리가 적용이 안되게 하는 방법이 있을까요?
만일 코드가 있다면 답변을 주시면 감사하겠습니다 ㅠㅠ
PS. 해당 반응형웹 프린트는 미리보기 팝업이 나오고 거기서 팝업 안에 출력버튼을 누르면 출력이 되는방식으로 한 상태에서도 미디어쿼리 768px 버전이 같이 적용이 되었습니다...
답변 1
음... 관련 사이트를 올려주시면 좋긴하겠지만
될지는 모르겠네요.
기존 프린트 태그에도 테이블 넣어서 조정해주면 되지 않을까요?
@media print{
body{margin:10px}
table {
border-collapse: collapse;
}
table th, table td {
width: 100% !important;
}
.no-print, .no-print * { display: none !important; }
}
@media (max-width: 768px) {
table th, table td {
width: calc(100%/2);
line-height:15px;
display: inline-block;
height: auto;
min-height: 30px;
}
}
답변주셔서 감사합니다.
알려주신 방법을 해보고 그리고 반응형 미디어 쿼리를 올리고 미디어 쿼리를 내려서 순서를 바꾸니 되었습니다.
감사합니다.
굿 입니다!
답변을 작성하시기 전에 로그인 해주세요.
