使用 css 重复前导答案

【问题标题】：thead repetition using css使用 css 重复前导
【发布时间】：2017-04-28 14:31:02
【问题描述】：

我正在使用 css 媒体查询在每一页上打印标题，它工作得很好，但是当我增加大于 2 的列或增加最后一列的字体大小或设置高度时，它不起作用，即它没有打印在所有页面上页面。

我无法理解出了什么问题。我想使用表结构而不是使用 div position:fixed 来完成它。请检查以下代码或建议任何其他代码来完成此任务。

提前致谢。

<!–-css code -–>
<style>
    @media print {
        thead { display: table-header-group;}
    }
</style>
<!–-css code- –> 

<!–-html code -–>
<table id=”tbl_head” width=”100%”>
    <thead>
        <tr>
            <th style=”border-bottom:2px solid #999;”>
                <!--Customize Header -->
                <table width="100%">
                    <tbody>
                    <tr>
                      <td colspan="3">
                        <h4 style="text-align: center; font-weight: normal; background: #ccc none repeat scroll 0% 0%; font-size: 16px; padding: 8px 0px; margin: 2px 0 0 0; border: 1px solid #000;">FULLY COMPUTERISED LAB</h4>
                      </td>
                  </tr>
                  <tr>
                      <td style="text-align:left;">
                        <span style="text-align: left;margin-bottom: 0px;font-size: 22px;font-weight:bold">Test</span>
                        <span style="font-size: 12px;margin-top: 5px">Test Centre</span>
                      </td>
                      <td style="text-align:left;">
                        <span style="font-size:18px;margin-bottom: 2px;margin-top: 2px">Dr. sharma</span>
                        <span style="margin-top:2px">M.D.</span>
                      </td>
                      <td style="text-align:left;">
                        <span style="font-size:10px"><b>Address</b></span>
                        <span style="font-size:10px"><b>Phone: 0731-787878, Mobile: </b></span> 
                        <span style="font-size:10px"><b>Email: example2514@gmail.com</b></span>
                        <span style="font-size:10px"><b>Time: 7:30am to 10pm; Sunday 8am to 1pm</b></span>
                      </td> 
                  </tr>
              </tbody>
            </table> 
            <!--Customize Header -->
          </th>
         </tr>
        </thead>
       <!--thead tag close -->
        <tbody>
          <tr>
             <td>
                   <!-- some other code here -->
             </td>
           </tr>
         </tbody>
        </table>
    <!–-html code -–>

【问题讨论】：

这是一封电子邮件吗？如果不是，那么你不应该以你现在的方式使用这张桌子。表格仅用于表格数据，不应用于布局目的。尤其是您在标题中使用嵌套表的方式
@Pete，这不是一封电子邮件。它只是 HTML，实际上我使用了表格或嵌套表格，因为仅用于打印重复目的。

标签： html css printing media-queries

【解决方案1】：

我相信这个例子会对你有所帮助。有了它，您可以将文本放在任意数量的独立列中！ http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-count

.class name or #id name {
 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
 column-count: 3;
}

【讨论】：