Question

我不知道如何在打印时使用CSS更改动态表格的行高。即使使用line-height属性，它也会被忽略。以下是屏幕截图。有什么建议么？我有

编辑：谢谢大家的欢迎信息和建议，

这是我当前的CSS（很抱歉，它很乱）

/*Remove footer*/
.footer .footer-credits {
    display: none;
}

.products{
    text-align:center;
}

#primary{
    width:100%;
    text-align:center;
}

.page-title-section{
    display:none;
}

.page-title{
    padding-bottom:40px;
}

p{
    color:black;
}

form, label{
    width:100%
}


.contact_form_right_new{
    width:50%;
    text-align:center;
    margin: 0 auto;
}

.form_dist{
    margin:0 auto;
}

.wpf-center, #wpforms-2270-field_0, #wpforms-2270-field_1, #wpforms-2270-field_4{
     margin-left: auto !important;
     margin-right: auto !important;
     max-width: 500px; 
}

.wpf-center .wpforms-head-container, 
.wpf-center .wpforms-submit-container {
     text-align: center; 
}
.wpf-center, #wpforms-2323-field_0, #wpforms-2323-field_0-last, #wpforms-2323-field_1, #wpforms-2323-field_4{
     margin-left: auto !important;
     margin-right: auto !important;
     max-width: 500px; 
}

label{
    color:black
}

.g-recaptcha{
    text-align:center;
}

#wpforms-submit-2270{
    color:white;
    background-color:#2b75ff;
}

#wpforms-submit-2323{
    color:white;
    background-color:#2b75ff;
}
@media print{
    @page {
        size: landscape;
        margin: 20px;
    }

}
@media print {
    .content-area.pt0{
        padding-top:0
    } 
    .site-header {
        display: none;
    }
    .footer-callout{
        display:none;
    }
    footer{
        display:none;
    }

    #results td{
    padding:0;
        font-size:8px;
    }


    table {
  -webkit-print-color-adjust: exact !important;
}

}

.aimix-title{
    color:white;
    text-shadow: -2px 2px 0 #000,
                  2px 2px 0 #000,
                 1px -1px 0 #000;
}

#pgc-65-0-1{
    margin-left:70px;
}






@media only screen and (min-width: 768px) {
    .footer-widget-area .footer-widget:first-child {
    width: 66.6%;
}
.footer-widget-area .footer-widget:nth-child(2) {
    width: 33.3%;
}

}

@media only screen and (max-width: 768px) {


    #wpcw_contact-3{
        text-align:center;
        margin-top:15%
    }

}

#wpcf7-f2383-p51-o1{
    text-align:left
}

编辑：这是表格的代码（我完全知道我本可以使用用于样式化th和td的类）

 <table id = "results" style="-webkit-print-color-adjust: exact !important; color: black; border-collapse: collapse; border: 1px solid black;">
           <tr>
               <th style="border: 1px solid black; text-align: center">
                   Product
               </th>
               <th style="border: 1px solid black; text-align: center">
                   Description
               </th>
               <th style="border: 1px solid black; text-align: center">
                   Usage
               </th>
               <th style="border: 1px solid black; text-align: center">
                   First Aid Directions
               </th>
               <th style="border: 1px solid black; text-align: center">
                   Symbol
               </th>
           </tr>
                <?php foreach($productID as $id) {
                    $product = get_product($id);
                        ?>

                        <?php ?>
                            <tr style="background-color:<?php echo (get_attribute('colour',$product)); ?> !important;">
                                <td style="padding:6px; border: 1px solid black;"><?php echo $product -> get_name(); ?></td>
                                <td style="padding:6px; border: 1px solid black;"><?php echo $product -> get_description(); ?></td>
                                <td style="padding:6px; border: 1px solid black;"><?php echo(get_attribute('uses-and-methods',$product)); ?></td>
                                <td style="padding:6px; border: 1px solid black;"><?php echo (get_attribute('first-aid-directions',$product)); ?></td>
                                <td style="padding:6px; width:80px; border: 1px solid black;"><img id="ghs" src="<?php echo get_ghs('ghs',$product)?>" style="height:auto; width:auto;"/></td>


                           </tr>

                        <?php } ?>
</table>

Answer 1

Ryan，该答案是一种“非答案”答案。这是一个CodePen，其中包含您发布的代码，一些填充文本以及摘录。

https://codepen.io/Jason_B/pen/zeYKGJ

我看不到屏幕截图中显示的大间距。尝试验证码本的打印视图。我希望这个非答案可以在某些方面对您有所帮助。您共享的代码没有问题，这里有一些建议的调试步骤，如果问题解决了，也不要感到惊讶，它不是按照SO准则提出的。

您应该向我们展示您生成的HTML，而不是PHP。也许您已经在数据库或产品对象的内容中硬编码了行高。
这是在什么浏览器中进行的？所有这些？如果只有一个，则可能是由于扩展名引起的。如果是每个浏览器，您都知道它是您的代码，并且您还知道导致问题的代码不是您共享的代码。
如果问题不在共享代码中，请尝试在生成的代码上使用html验证程序。该表格之前的未关闭标签可能会将行高之类的样式泄漏到页面的其余部分。
限制您正在呈现的代码，直到您只有表格html和表格相关的样式为止，其中包括您这里没有的东西-td内容和某些字体的样式，我们会再看一遍。我很确定，如果您已经走了这么远并且遵循了调试计划，那么您已经将它舔了！

/*Remove footer*/

.footer .footer-credits {
  display: none;
}

.products {
  text-align: center;
}

#primary {
  width: 100%;
  text-align: center;
}

.page-title-section {
  display: none;
}

.page-title {
  padding-bottom: 40px;
}

p {
  color: black;
}

form,
label {
  width: 100%
}

.contact_form_right_new {
  width: 50%;
  text-align: center;
  margin: 0 auto;
}

.form_dist {
  margin: 0 auto;
}

.wpf-center,
#wpforms-2270-field_0,
#wpforms-2270-field_1,
#wpforms-2270-field_4 {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 500px;
}

.wpf-center .wpforms-head-container,
.wpf-center .wpforms-submit-container {
  text-align: center;
}

.wpf-center,
#wpforms-2323-field_0,
#wpforms-2323-field_0-last,
#wpforms-2323-field_1,
#wpforms-2323-field_4 {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 500px;
}

label {
  color: black
}

.g-recaptcha {
  text-align: center;
}

#wpforms-submit-2270 {
  color: white;
  background-color: #2b75ff;
}

#wpforms-submit-2323 {
  color: white;
  background-color: #2b75ff;
}

@media print {
  @page {
    size: landscape;
    margin: 20px;
  }
}

@media print {
  .content-area.pt0 {
    padding-top: 0
  }
  .site-header {
    display: none;
  }
  .footer-callout {
    display: none;
  }
  footer {
    display: none;
  }
  #results td {
    padding: 0;
    font-size: 8px;
  }
  table {
    -webkit-print-color-adjust: exact !important;
  }
}

.aimix-title {
  color: white;
  text-shadow: -2px 2px 0 #000, 2px 2px 0 #000, 1px -1px 0 #000;
}

#pgc-65-0-1 {
  margin-left: 70px;
}

@media only screen and (min-width: 768px) {
  .footer-widget-area .footer-widget:first-child {
    width: 66.6%;
  }
  .footer-widget-area .footer-widget:nth-child(2) {
    width: 33.3%;
  }
}

@media only screen and (max-width: 768px) {
  #wpcw_contact-3 {
    text-align: center;
    margin-top: 15%
  }
}

#wpcf7-f2383-p51-o1 {
  text-align: left
}

<table id="results" style="-webkit-print-color-adjust: exact !important; color: black; border-collapse: collapse; border: 1px solid black;">
  <tr>
    <th style="border: 1px solid black; text-align: center">
      Product
    </th>
    <th style="border: 1px solid black; text-align: center">
      Description
    </th>
    <th style="border: 1px solid black; text-align: center">
      Usage
    </th>
    <th style="border: 1px solid black; text-align: center">
      First Aid Directions
    </th>
    <th style="border: 1px solid black; text-align: center">
      Symbol
    </th>
  </tr>

  <tr style="background-color:green">
    <td style="padding:6px; border: 1px solid black;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et consequat magna. Nunc pulvinar dolor fermentum scelerisque congue. Donec et felis eget ex laoreet dictum. Mauris at maximus erat. Ut dapibus est eu urna congue, id varius leo condimentum.
      Vivamus et ultrices felis. Proin condimentum mauris id risus tincidunt egestas sit amet nec nulla. Sed risus purus, tempor eget venenatis id, egestas at magna.
    </td>
    <td style="padding:6px; border: 1px solid black;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et consequat magna. Nunc pulvinar dolor fermentum scelerisque congue. Donec et felis eget ex laoreet dictum. Mauris at maximus erat. Ut dapibus est eu urna congue, id varius leo condimentum.
      Vivamus et ultrices felis. Proin condimentum mauris id risus tincidunt egestas sit amet nec nulla. Sed risus purus, tempor eget venenatis id, egestas at magna.
    </td>
    <td style="padding:6px; border: 1px solid black;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et consequat magna. Nunc pulvinar dolor fermentum scelerisque congue. Donec et felis eget ex laoreet dictum. Mauris at maximus erat. Ut dapibus est eu urna congue, id varius leo condimentum.
      Vivamus et ultrices felis. Proin condimentum mauris id risus tincidunt egestas sit amet nec nulla. Sed risus purus, tempor eget venenatis id, egestas at magna.
    </td>
    <td style="padding:6px; border: 1px solid black;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et consequat magna. Nunc pulvinar dolor fermentum scelerisque congue. Donec et felis eget ex laoreet dictum. Mauris at maximus erat. Ut dapibus est eu urna congue, id varius leo condimentum.
      Vivamus et ultrices felis. Proin condimentum mauris id risus tincidunt egestas sit amet nec nulla. Sed risus purus, tempor eget venenatis id, egestas at magna.
    </td>
    <td style="padding:6px; width:80px; border: 1px solid black;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et consequat magna. Nunc pulvinar dolor fermentum scelerisque congue. Donec et felis eget ex laoreet dictum. Mauris at maximus erat. Ut dapibus est eu urna congue, id varius leo condimentum.
      Vivamus et ultrices felis. Proin condimentum mauris id risus tincidunt egestas sit amet nec nulla. Sed risus purus, tempor eget venenatis id, egestas at magna.
    </td>
  </tr>

</table>

CSS行高规则被忽略

1 个答案: