CONAN ZONE

          你越掙扎我就越興奮

          BlogJava 首頁 新隨筆 聯系 聚合 管理
            0 Posts :: 282 Stories :: 0 Comments :: 0 Trackbacks

          最近給客戶做打印的時候,客戶提出打印時不要打印該頁面的頭,只是打印表格里面的內容,因為頭部有背景和打印按鈕,而且要細線表格的那種,我想細線表格不是很簡單嗎

           

          如果你還不知道細線表格怎么做,請看下面的代碼實現效果:)

          <table cellSpacing=0 cellPadding=0 border=0>
          <tr>
          <td bgcolor='black'>
          <table cellSpacing=1 cellPadding=1 border=0>
          <tr align=center bgcolor='#ffffff'>
          <td colspan=2>國家級</td><td colspan=1>市級</td>
          </tr>
          <tr bgcolor='#ffffff' align=center>
          <td>人民日報</td>
          <td>解放日報</td>
          <td>新民晚報</td>
          </tr>
          </table>
          </td>
          </tr>
          </table>
          

           

          然后把IE的設置為可以打印背景,本以為可以大功告成了

          結果打印一預覽,頭部一個大黑塊,為什么呢,因為我頭部里面的有一個背景,結果占用頁面!

          .gTitle
          {
          width:100%;
          height:32px;
          line-height:32px;
          background-image:url(images/gtitle.gif);
          	padding-left:130px;
          margin-bottom:10px;
          }
          

           

          開始郁悶啦,在網上搜了半天都沒有一個完美的解決方案,決定自己搞定。

          自己琢磨了半天,終于搞定:)

          Css定義如下:

          noneprint: 打印時隱藏的樣式定義

          tabPrint:    要打印的細線表格樣式定義

          nextPate:  分頁的樣式定義

          linetd:       呵呵,此處最關鍵,讓你的表格打印時完美無

           

          1. @media print {   
          2. .noneprint{display:none;}   
          3. }   
          4.   
          5. .tabPrint td   
          6. {   
          7.     border-left:#000000 solid 1px;   
          8.     border-top:#000000 solid 1px;   
          9.     height:21px;   
          10. }   
          11.   
          12. table.tabPrint   
          13. {   
          14.     border-right:#000000 solid 1px;   
          15.     border-bottom:#000000 solid 1px;   
          16. }   
          17.   
          18. .nextPage   
          19. {   
          20.     page-break-after:always;   
          21. }   
          22. .linetd   
          23. {   
          24.     border-bottom:solid 1px #000;   
          25. }  

           

           

          頁面HTML如下: 

          記得在thead加上style="display:table-header-group;font-weight:bold",這樣每個頁面才會有都表頭喲

           

          <div class="noneprint">
          <div class="gTitle">>><A href="../Default.aspx" mce_href="Default.aspx">首頁</A>>><A href="Default.aspx" mce_href="Default.aspx">門戶</A>>>信息管理</div>
          <table cellSpacing="0" cellPadding="2" width="100%" align="center" border="0" ID="Table1">
          <tr>
          <td align="right">標題:</td>
          <td><input name="txtFName" type="text" id="txtFName" style="width:150px;" /></td>
          <td align="right">所屬街道:</td>
          <td><select name="ddlStreet" id="ddlStreet">
          <option selected="selected" value="">-請選擇狀態-</option>
          </select></td>
          <td align="right">錄入日期:</td>
          <td colSpan="3"><input name="sDate" type="text" id="sDate" onclick="setday(this)" style="width:80px;" />--
          <input name="eDate" type="text" id="eDate" onclick="setday(this)" style="width:80px;" /></td>
          <td><input type="submit" name="btnSearch" value="查詢" id="btnSearch" class="Button" />
          <input type="button" onclick="window.print()" value="打印" class="Button" ID="Button1" NAME="Button1"></td>
          </tr>
          </table>
          </div>
          <table class='tabPrint' align="center" width="95%" cellSpacing="0" cellPadding="0" border="0"
          ID="Table2">
          <thead style="display:table-header-group;font-weight:bold" mce_style="display:table-header-group;font-weight:bold">
          <tr align="center">
          <td rowspan="2">所屬街道</td>
          <td rowspan="2">標題</td>
          <td rowspan="2">錄入日期</td>
          <td colspan="2">國家級</td>
          <td colspan="1">市級</td>
          </tr>
          <tr align="center">
          <td>人民日報</td>
          <td>解放日報</td>
          <td>新民晚報</td>
          </tr>
          </thead><tbody>
          <tr align="center">
          <td>浦東新區浦三街道</td>
          <td>測試</td>
          <td>02-24-2009</td>
          <td>√</td>
          <td>√</td>
          <td>√</td>
          </tr>
          <tr align="center">
          <td>浦東新區浦三街道</td>
          <td>sseref</td>
          <td>02-24-2009</td>
          <td> </td>
          <td> </td>
          <td> </td>
          </tr>
          <tr align="center">
          <td>浦東新區浦三街道</td>
          <td>sseref</td>
          <td>02-24-2009</td>
          <td> </td>
          <td> </td>
          <td> </td>
          </tr>
          <tr align="center" class='nextPage'>
          <td colspan="6" class='linetd'>第1頁</td>
          </tr>
          <tr align="center">
          <td>浦東新區浦三街道</td>
          <td>sdsedjiik</td>
          <td>02-24-2009</td>
          <td> </td>
          <td> </td>
          <td> </td>
          </tr>
          <tr align="center">
          <td>浦東新區浦三街道</td>
          <td>sdsedjiik</td>
          <td>02-24-2009</td>
          <td> </td>
          <td> </td>
          <td> </td>
          </tr>
          <tr align="center">
          <td>浦東新區浦三街道</td>
          <td>sdsedjiik</td>
          <td>02-24-2009</td>
          <td> </td>
          <td> </td>
          <td> </td>
          </tr>
          <tr align="center">
          <td>浦東新區浦三街道</td>
          <td>sdsedjiik</td>
          <td>02-24-2009</td>
          <td> </td>
          <td> </td>
          <td> </td>
          </tr>
          <tr align="center">
          <td>浦東新區浦三街道</td>
          <td>sdsedjiik</td>
          <td>02-24-2009</td>
          <td> </td>
          <td> </td>
          <td> </td>
          </tr>
          </tbody></table>
          

           

           

          呵呵,標記為紅色的地方你可要看仔細喲,完不完美全靠它!

          轉自:http://blog.csdn.net/maomaoysq/archive/2009/02/24/3933480.aspx

          posted on 2009-02-25 09:44 CONAN 閱讀(760) 評論(0)  編輯  收藏 所屬分類: J2EE
          主站蜘蛛池模板: 宁国市| 池州市| 双辽市| 萝北县| 五大连池市| 卢龙县| 淮安市| 平遥县| 舞钢市| 云和县| 从化市| 黔江区| 礼泉县| 张家港市| 宣恩县| 鄯善县| 扶沟县| 眉山市| 灵寿县| 平原县| 大英县| 郁南县| 班玛县| 绥芬河市| 梅州市| 区。| 洮南市| 广昌县| 晋江市| 肥东县| 五峰| 区。| 屏东县| 崇义县| 澜沧| 洪洞县| 辽源市| 安陆市| 万盛区| 巴彦淖尔市| 庆安县|