2015-04-21 96 views
0
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
    <style type="text/css"> 
    @page { 
      size:A4 portrait; 
      border-top:1.2px solid black; 
      border-bottom:1.2px solid black;   
    } 
    </style> 
<style type="text/arial" media="print">  

      @page { 
       margin: 75px 16px 75px 16px; 
       @PageBreak{ 
        page-break:always; 
        page-break-inside:avoid; 
       } 

       @top-center { 
        content: element(header); 
       } 
       @bottom-center { 
        content: element(footer); 
       } 
      }    
      div.header{ 
      position: running(header);   
      } 
      div.footer { 
       position : running(footer) ; 
      } 

      .pagenumber:before {     
       content: counter(page);    
      }      
      .pagecount:before {    
       content: counter(pages);    
      } 

     </style>    
    </head> 
      <table width="100%" border="2" cellspacing="0" cellpadding="0" style="border-top:solid; border-color:#EBEBEB;"> 
       <tr>   
        <td align="center"> 
         <apex:outputText value="Page " style="font-face:verdana;font-size:0.68em;"/> 
         <span class="pagenumber" style="font-face:verdana;font-size:0.68em;"/> 
         <apex:outputText value="of" style="font-face:verdana;font-size:0.68em;padding-left:2px;padding-right:2px"/> 
         <span class="pagecount" style="font-face:verdana;font-size:0.68em;"/> 
        </td> 
       </tr>   
      </table> 

enter image description here如何使邊界線和表格邊框線等方式

我不能能夠平衡表格邊框和上邊框。 要麼我保持表格的寬度爲100%,但仍然是一個沒有擴展 我別無選擇,邊境降低到表格的寬度幫我找到一個解決方案

建議我如何從這個問題

+0

嘗試將cellspacing和cellpadding重置爲0以及表格邊框爲0 – Aru

+0

@Aru表格邊框必須在那裏 – Karthika

+0

那麼黑色邊框是什麼?我希望你需要刪除頂部,左側和右側空間! – Aru

回答

1

恢復相反,你可以使用一個類像下面的:

的Html

<div class="tabularcontent"> 
    <table width="100%" class="tablecontent"> 
     <tr> 
      <td align="center">content</td> 
     </tr> 
    </table> 
</div> 

的CSS

table { 
    border-spacing:0; 
    padding:0; 
    margin:0; 
} 
.tabularcontent { 
    border:2px solid black; 
} 
.tablecontent { 
    border:2px solid #ebebeb; 
} 

Fiddle Demo

1

HTML

<table> 
    <thead> 
     <tr> 
      <th>content</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>content</td> 
     </tr> 
    </tbody> 
</table> 

CSS

table { 
    border-spacing:0; 
    padding:0; 
    margin:0; 
    border:2px solid black; 
    border-collapse:collapse; 
    width:100%; 
} 
th { 
    border:2px solid black; 
} 

這樣嗎? DEMO