Question

我正在使用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 -–>

Answer 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;
}

使用css进行重复

1 个答案: