2017-01-06 4 views
3

Здравствуйте, я стараюсь, чтобы удалить границу с моего стола, когда кнопка пользователь нажимает печать (window.print) с помощью CSS, но она всегда оставаться в печатной страницеКак я могу удалить границу из таблицы при печати с помощью CSS @media печати

это мой CSS код:

@media print{ 

    body * {visibility: hidden; 


    } 

    table { 
     border:solid; white !important; 
     border-width:1px 0 0 1px !important; 
     border-bottom-style: none; 
    } 
    th, td{ 
     border:solid; white !important; 
     border-width:0 1px 1px 0 !important; 
     border-bottom-style: none; 
    } 
} 

этот CSS дал мне этот результат:

enter image description here

нижняя граница таблицы пребывания показывая Как я может удалить его Спасибо и

+0

Прежде всего, попробуйте использовать 'границы: твердый белый важный;' (не ';! 'после' solid'). –

+0

вы можете разместить свой html-код? –

+0

Попробуйте 'border-bottom: none;' –

ответ

2

Наконец Это решение работал для меня:

@media print { 

    * { 
     color: #000;  
     background-color: #fff; 
     @include box-shadow(none); 
     @include text-shadow(none); 
    } 
} 
4

Вы могли бы использовать в CSS3 @media Правиле:

border-bottom: none; 

или

border: solid white !important; 

Использования border-bottom: none; может повлиять на расположение вами таблицу при печати (в зависимости, если вы используя box-sizing со значением по умолчанию или нет). не

Ниже приведен пример:


<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <style> 
     table { 
      /* just an example */ 
      border: solid red; 
      border-width: 1px 0 0 1px !important; 
      border-bottom-style: none; 
     } 

     @media print { 

      table { 
       border: solid white !important; 
       border-width: 1px 0 0 1px !important; 
       border-bottom-style: none; 
      } 

      th, td { 
       border: solid white !important; 
       border-width: 0 1px 1px 0 !important; 
       border-bottom-style: none; 
      } 
     } 
    </style> 
</head> 
<body> 
    <table style="width:100%"> 
     <tr> 
      <th>Firstname</th> 
      <th>Lastname</th> 
      <th>Age</th> 
     </tr> 
     <tr> 
      <td>Jill</td> 
      <td>Smith</td> 
      <td>50</td> 
     </tr> 
     <tr> 
      <td>Eve</td> 
      <td>Jackson</td> 
      <td>94</td> 
     </tr> 
    </table> 
</body> 
</html> 
Смежные вопросы