当前位置： 文江博客话题详情

如何在所有浏览器中添加表格边框并使表格居中？

发布于 2024-12-03 15:57:46 字数 11124 浏览 0 评论 0原文

谁能告诉我如何在 Google Chrome 中添加表格边框？ 以及如何在 Firefox、Safari、Opera、Chrome 中对齐表格“中心”。

请找到随附的代码：

<html>
<head>
<style type="text/css">
.mainpagebordr {
    BORDER-BOTTOM: #000000 1px solid;
    BORDER-LEFT: #000000 1px solid;
    BORDER-COLLAPSE: collapse;
    BORDER-TOP: #000000 1px solid;
    BORDER-RIGHT: #000000 1px solid; 
    margin-left : auto;
    margin-right:  auto;
    margin-left:  auto;
    }
    .marginStyle{margin: 0 auto;} 
</style>
</head>
<body>


<center>
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" class="marginStyle" align="center">

<tr class="rcptFont">

    <tr>

    <td width="26.7%">&nbsp;

    </td>

    <td align="center" width="480px" valign="top">

<table border="0" class="mainpagebordr marginStyle" height="730" align="center">     

        <tr class="rcptFont">

        <td width="175" valign="top" height="10%">

        <table width="200" align="left">

        <tr>

        <td width="105" height="90" style="padding-left: 10px">

        <img src="/URAPortalBC/Common/images/ura5.jpg" height="112" width="160"/>

        </td>

        </tr>

        <tr class="rcptFont1">

        <td width="175">

        </td>       

        </tr>       

        </table>    

        </td>



        <td colspan="4" width="245" align="center" class="withBorder marginStyle" valign="top">

        <table align="center" class="withBorder marginStyle" width="245">

                    <tr class="rcpthead">

                        <td width="245" align="center">

                            <strong>Uganda Revenue Authority</strong>

                        </td>

                    </tr>

                    <tr class="rcptFont1">

                        <td  align="center">Kampala Area office Plot 51,Windsor Crescent P.O.box 1234 Kampala,Uganda</td>

                    </tr>



        <tr class="rcpthead">

        <td  align="center" >

        <strong>Acknowledgement Receipt</strong>

        </td>

        </tr>

        <tr class="rcptFont" >

        <td align="center">

        <strong>Declaration of Instrument</strong>

        </td>

        </tr>

        </table>

        </td>

        <td colspan="4" width="245" valign="top" style="padding-top: 3px;padding-right: 10px">

                        <table width="170" class="rcptlstHead" valign="top">

                    <tr>

                        <td width=""><p style="FONT-SIZE:8pt;font-family:Arial;TEXT-ALIGN: right""><b>For General Tax Questions</b></p>

                    </tr>

                    <tr>

                        <td><p style="FONT-SIZE:8pt;font-family:Arial;TEXT-ALIGN: right"> Call Our Toll Free Number</p></td>

                    </tr>

                    <tr>

                        <td><p style="FONT-SIZE:10pt;font-family:Arial;TEXT-ALIGN: right"><b>0800117000</b></p></td>

                    </tr>

                    <tr>

                        <td><p style="FONT-SIZE:8pt;font-family:Arial;TEXT-ALIGN: right">  Or log onto URA web portal</p>

                        </td>

                    </tr>

                    <tr>

                        <td><p style="FONT-SIZE:10pt;font-family:Arial;TEXT-ALIGN: right">  <b>http://ura.go.ug </b></p>

                        </td>

                    </tr>

                </table>

            </td>

        </tr>   

        <tr> <td> &nbsp; </td> </tr>

        <tr class="rcptFont">

        <td colspan="4">

         &nbsp;&nbsp;Dr. dfdfd  asfdsf

        </td>

        <td colspan="5" >   

        &nbsp;Notice Date : <strong>09/09/2011</strong> 

        </td>

        </tr>





        <tr class="rcptFont">

        <td colspan="4">

         &nbsp;&nbsp;  ,

        </td>

        <td colspan="5" >

        &nbsp;Reference No :<strong>LI02120001570</strong>      

        </td>       

        </tr>

        <tr  class="rcptFont">

        <td colspan="4">

         &nbsp;&nbsp; addaf ,

        </td>

        <td colspan="5" align="right"> 

            <img src="http://localhost:8080/URAPortalBC/barcode?data=LI02120001570&amp;headless=false&amp;drawText=false&amp;width=1&amp;height=5&amp;type-Code128B" border="0" alt=""/>

        </td>

        </tr>

        <tr class="rcptFont">

            <td colspan="4">

         &nbsp;&nbsp;AMOLATAR, KIOGA, AMOLATAR TOWN COUNCIL

        </td>

        <td colspan="5" >

        &nbsp;TIN : <strong>N.A.</strong>       

        </td>

        </tr>



    <tr> <td> &nbsp; </td> </tr>



    <td colspan=10>

    <table align="center" border="1" bordercolor="black" valign="top" width="90%" cellpadding="0" cellspacing="0" class="marginStyle">

    <tr class="rcptFont">

        <td colspan="8">

        <center><b>Declaration of Instrument For Stamp Duty</b></center>

        </td>

            <tr class="rcptFont">

                <td align="center" width="5%" class="mainpagebordr" align="left"><b>1</b></td>

                <td align="left" width="45%" class="mainpagebordr" align="left"><b>TIN of applicant</b></td>

                <td align="left" width="50%" class="mainpagebordr" align="left"><b>N.A.</b></td>

            </tr>





            <tr class="rcptFont">

                <td align="center" width="5%" class="mainpagebordr" align="left"><b>2</b></td>

                <td align="left" width="45%" class="mainpagebordr" align="left"><b>Name of Taxpayer</b></td>

                <td align="left" width="50%" class="mainpagebordr" align="left"><b>Dr. dfdfd  asfdsf</b></td>

            </tr>



            <tr class="rcptFont">

                <td align="center" width="5%"class="mainpagebordr" align="left"><b>3</b></td>

                <td align="left" width="45%" class="mainpagebordr" align="left"><b>Type of Instrument</b></td>

                <td align="left" width="50%" class="mainpagebordr" align="left"><b>CANCELLATION-instrument of</b></td>

            </tr>

            <tr class="rcptFont">

                <td align="center" width="5%" class="mainpagebordr" align="left"><b>4</b></td>

                <td align="left" width="45%" class="mainpagebordr" align="left"><b>Number of copies to be stamped</b></td>

                <td align="left" width="50%" class="mainpagebordr" align="left"><b>2</b></td>

            </tr>



            <tr class="rcptFont">

                <td align="center" width="5%" class="mainpagebordr" align="left"><b>5</b></td>

                <td align="left" width="45%" class="mainpagebordr" align="left"><b>Amount of Duty (UGX)</b></td>

                <td align="left" width="50%" class="mainpagebordr" align="left"><b>0</b></td>

            </tr>





            <tr class="rcptFont">

                <td align="center" width="5%" class="mainpagebordr" align="left"><b>6</b></td>

                <td align="left" width="45%" class="mainpagebordr" align="left"><b>Payment registration Number</b></td>

                <td align="left" width="50%" class="mainpagebordr" align="left"><b>2120000000412</b></td>

            </tr>



        </table>

        </td>

        <br>

        <br>

        <tr align="center"  class="rcptFont">

            <td colspan="10"><b></b>        

                <br>

                <table align="left">

                        <tr><td class="rcptFont1">Your Search code:&nbsp;</td>

                            <td class="rcptFont1"><strong>52065557675TW</strong></td>

                        </tr>

                    </table>                

            </td>           

        </tr>



    <tr> <td> &nbsp; </td> </tr>

    <tr> <td> &nbsp; </td> </tr>

    <tr class="rcptFont">

        <td colspan="8">

        <center><b>Official URA Representative</b></center>

        </td>

        </tr>       

    <tr class="rcptFont">

        <td colspan="8">

        <center>Please check for the status of your application at the nearest tax office or</center>

        </td>

        </tr>   

    <tr class="rcptFont">

        <td colspan="8">

        <center>the URA web portal at http://ura.go.ug</center>

        </td>

        </tr>   

        <tr>

            <td colspan="10">

            <hr style="height:1px;">

            <p style="FONT-SIZE:8pt;font-family:Arial;TEXT-ALIGN: center;">Plot 26/28, Olwol Road, Opposite Blue Valley Guest House, LIRA</p>

            </td>

        </tr>       

        </table>

        </td>

        </tr>



    </table>

    <table align="center" >

            <!--<tr >

                <td align="center">

                    <form name="receiptForm" method="post">

                        <input type="hidden" name="dispatch" value="" />

                        <div id="buttons">

                            <input type="button" value="Print" id='printBtn' class="submit" onmouseover="hideStatusMsg()" onclick="printReceipt()" />

                            <input type="button" class="submit" value="Back" id='backBtn' onclick="backToRegn()" onmouseover="hideStatusMsg()"/>

                        </div>

                    </form>

                </td>

            </tr>

        --></table>



<!-- payment receipt 

 -->
</center>

</body>
</html>
原文

Can anyone tell me how to add the borders for the table in Google Chrome?
And how to align the table 'center' in Firefox,Safari,Opera,Chrome.

Please find the attached code :

<html>
<head>
<style type="text/css">
.mainpagebordr {
    BORDER-BOTTOM: #000000 1px solid;
    BORDER-LEFT: #000000 1px solid;
    BORDER-COLLAPSE: collapse;
    BORDER-TOP: #000000 1px solid;
    BORDER-RIGHT: #000000 1px solid; 
    margin-left : auto;
    margin-right:  auto;
    margin-left:  auto;
    }
    .marginStyle{margin: 0 auto;} 
</style>
</head>
<body>


<center>
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" class="marginStyle" align="center">

<tr class="rcptFont">

    <tr>

    <td width="26.7%"> 

    </td>

    <td align="center" width="480px" valign="top">

<table border="0" class="mainpagebordr marginStyle" height="730" align="center">     

        <tr class="rcptFont">

        <td width="175" valign="top" height="10%">

        <table width="200" align="left">

        <tr>

        <td width="105" height="90" style="padding-left: 10px">

        <img src="/URAPortalBC/Common/images/ura5.jpg" height="112" width="160"/>

        </td>

        </tr>

        <tr class="rcptFont1">

        <td width="175">

        </td>       

        </tr>       

        </table>    

        </td>



        <td colspan="4" width="245" align="center" class="withBorder marginStyle" valign="top">

        <table align="center" class="withBorder marginStyle" width="245">

                    <tr class="rcpthead">

                        <td width="245" align="center">

                            <strong>Uganda Revenue Authority</strong>

                        </td>

                    </tr>

                    <tr class="rcptFont1">

                        <td  align="center">Kampala Area office Plot 51,Windsor Crescent P.O.box 1234 Kampala,Uganda</td>

                    </tr>



        <tr class="rcpthead">

        <td  align="center" >

        <strong>Acknowledgement Receipt</strong>

        </td>

        </tr>

        <tr class="rcptFont" >

        <td align="center">

        <strong>Declaration of Instrument</strong>

        </td>

        </tr>

        </table>

        </td>

        <td colspan="4" width="245" valign="top" style="padding-top: 3px;padding-right: 10px">

                        <table width="170" class="rcptlstHead" valign="top">

                    <tr>

                        <td width=""><p style="FONT-SIZE:8pt;font-family:Arial;TEXT-ALIGN: right""><b>For General Tax Questions</b></p>

                    </tr>

                    <tr>

                        <td><p style="FONT-SIZE:8pt;font-family:Arial;TEXT-ALIGN: right"> Call Our Toll Free Number</p></td>

                    </tr>

                    <tr>

                        <td><p style="FONT-SIZE:10pt;font-family:Arial;TEXT-ALIGN: right"><b>0800117000</b></p></td>

                    </tr>

                    <tr>

                        <td><p style="FONT-SIZE:8pt;font-family:Arial;TEXT-ALIGN: right">  Or log onto URA web portal</p>

                        </td>

                    </tr>

                    <tr>

                        <td><p style="FONT-SIZE:10pt;font-family:Arial;TEXT-ALIGN: right">  <b>http://ura.go.ug </b></p>

                        </td>

                    </tr>

                </table>

            </td>

        </tr>   

        <tr> <td>   </td> </tr>

        <tr class="rcptFont">

        <td colspan="4">

           Dr. dfdfd  asfdsf

        </td>

        <td colspan="5" >   

         Notice Date : <strong>09/09/2011</strong> 

        </td>

        </tr>





        <tr class="rcptFont">

        <td colspan="4">

             ,

        </td>

        <td colspan="5" >

         Reference No :<strong>LI02120001570</strong>      

        </td>       

        </tr>

        <tr  class="rcptFont">

        <td colspan="4">

            addaf ,

        </td>

        <td colspan="5" align="right"> 

            <img src="http://localhost:8080/URAPortalBC/barcode?data=LI02120001570&headless=false&drawText=false&width=1&height=5&type-Code128B" border="0" alt=""/>

        </td>

        </tr>

        <tr class="rcptFont">

            <td colspan="4">

           AMOLATAR, KIOGA, AMOLATAR TOWN COUNCIL

        </td>

        <td colspan="5" >

         TIN : <strong>N.A.</strong>       

        </td>

        </tr>



    <tr> <td>   </td> </tr>



    <td colspan=10>

    <table align="center" border="1" bordercolor="black" valign="top" width="90%" cellpadding="0" cellspacing="0" class="marginStyle">

    <tr class="rcptFont">

        <td colspan="8">

        <center><b>Declaration of Instrument For Stamp Duty</b></center>

        </td>

            <tr class="rcptFont">

                <td align="center" width="5%" class="mainpagebordr" align="left"><b>1</b></td>

                <td align="left" width="45%" class="mainpagebordr" align="left"><b>TIN of applicant</b></td>

                <td align="left" width="50%" class="mainpagebordr" align="left"><b>N.A.</b></td>

            </tr>





            <tr class="rcptFont">

                <td align="center" width="5%" class="mainpagebordr" align="left"><b>2</b></td>

                <td align="left" width="45%" class="mainpagebordr" align="left"><b>Name of Taxpayer</b></td>

                <td align="left" width="50%" class="mainpagebordr" align="left"><b>Dr. dfdfd  asfdsf</b></td>

            </tr>



            <tr class="rcptFont">

                <td align="center" width="5%"class="mainpagebordr" align="left"><b>3</b></td>

                <td align="left" width="45%" class="mainpagebordr" align="left"><b>Type of Instrument</b></td>

                <td align="left" width="50%" class="mainpagebordr" align="left"><b>CANCELLATION-instrument of</b></td>

            </tr>

            <tr class="rcptFont">

                <td align="center" width="5%" class="mainpagebordr" align="left"><b>4</b></td>

                <td align="left" width="45%" class="mainpagebordr" align="left"><b>Number of copies to be stamped</b></td>

                <td align="left" width="50%" class="mainpagebordr" align="left"><b>2</b></td>

            </tr>



            <tr class="rcptFont">

                <td align="center" width="5%" class="mainpagebordr" align="left"><b>5</b></td>

                <td align="left" width="45%" class="mainpagebordr" align="left"><b>Amount of Duty (UGX)</b></td>

                <td align="left" width="50%" class="mainpagebordr" align="left"><b>0</b></td>

            </tr>





            <tr class="rcptFont">

                <td align="center" width="5%" class="mainpagebordr" align="left"><b>6</b></td>

                <td align="left" width="45%" class="mainpagebordr" align="left"><b>Payment registration Number</b></td>

                <td align="left" width="50%" class="mainpagebordr" align="left"><b>2120000000412</b></td>

            </tr>



        </table>

        </td>

        <br>

        <br>

        <tr align="center"  class="rcptFont">

            <td colspan="10"><b></b>        

                <br>

                <table align="left">

                        <tr><td class="rcptFont1">Your Search code: </td>

                            <td class="rcptFont1"><strong>52065557675TW</strong></td>

                        </tr>

                    </table>                

            </td>           

        </tr>



    <tr> <td>   </td> </tr>

    <tr> <td>   </td> </tr>

    <tr class="rcptFont">

        <td colspan="8">

        <center><b>Official URA Representative</b></center>

        </td>

        </tr>       

    <tr class="rcptFont">

        <td colspan="8">

        <center>Please check for the status of your application at the nearest tax office or</center>

        </td>

        </tr>   

    <tr class="rcptFont">

        <td colspan="8">

        <center>the URA web portal at http://ura.go.ug</center>

        </td>

        </tr>   

        <tr>

            <td colspan="10">

            <hr style="height:1px;">

            <p style="FONT-SIZE:8pt;font-family:Arial;TEXT-ALIGN: center;">Plot 26/28, Olwol Road, Opposite Blue Valley Guest House, LIRA</p>

            </td>

        </tr>       

        </table>

        </td>

        </tr>



    </table>

    <table align="center" >

            <!--<tr >

                <td align="center">

                    <form name="receiptForm" method="post">

                        <input type="hidden" name="dispatch" value="" />

                        <div id="buttons">

                            <input type="button" value="Print" id='printBtn' class="submit" onmouseover="hideStatusMsg()" onclick="printReceipt()" />

                            <input type="button" class="submit" value="Back" id='backBtn' onclick="backToRegn()" onmouseover="hideStatusMsg()"/>

                        </div>

                    </form>

                </td>

            </tr>

        --></table>



<!-- payment receipt 

 -->
</center>

</body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

合约呢 2024-12-10 15:57:46

更改为：

<center>
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" class="marginStyle" align="center">

更改为：

<table width="100%" cellpadding="0" cellspacing="0">

更改为：

.marginStyle{margin: 0 auto;}

更改为：

table { text-align: center; margin: 0 auto; border-collapse: collapse; border: 1px solid red; }
table tr, table td { text-align: left; }

Change this:

<center>
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" class="marginStyle" align="center">

To this:

<table width="100%" cellpadding="0" cellspacing="0">

And this:

.marginStyle{margin: 0 auto;}

To this:

table { text-align: center; margin: 0 auto; border-collapse: collapse; border: 1px solid red; }
table tr, table td { text-align: left; }
回复 原文
和我恋爱吧 2024-12-10 15:57:46

标签已弃用，因此您不应使用它。
您在大多数表格上都使用了 border="0" 属性，最好省略此属性并使用 css 来创建边框。

当元素具有固定宽度时，可以通过在两侧分配相等的边距来使用 margin:0 auto; 。在大多数情况下，您已将固定宽度的 table 放置在相同大小的固定宽度的 td 内。这没有留下任何余量的空间，因此从技术上讲，您已将表格居中，但显然视觉效果不是您想要的。

如果您希望最外面的表格充当容器并将整个表格结构居中，则需要为其指定固定宽度，因为目前它的宽度为 100%。

The <center> tag is deprecated so you shouldn't use it.
You have used border="0" attribute on most of your tables, it would be best to omit this attribute and use css to create the borders.

Using margin:0 auto; works when an element has a fixed width by assigning equal margins on both sides. In most of your cases you have placed a fixed width table inside a fixed width td of the same size. This leaves no room for any margin so technically you have centered the table but obviously the visual is not what you want.

If you want the outer most table to act as a container and center the entire table structure you will need to give it a fixed width because currently it is 100% width.

回复 原文
~没有更多了~

关于作者

自找没趣

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

书间行客

文章 0 评论 0

我ぃ本無心為│何有愛

文章 0 评论 0

神妖

文章 0 评论 0

undefined

文章 0 评论 0

38169838

文章 0 评论 0

彡翼

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文