Question

 <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％仍然没有扩大我没有选择减少边框到桌面宽度帮助我找到解决方案

建议我如何从这个问题中恢复

Answer 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

Answer 2

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

如何使边框线和表格边框线相等

2 个答案: