如何限制css中边框的长度？答案

【问题标题】：How to limit the length of a border in css?如何限制css中边框的长度？
【发布时间】：2018-11-30 06:04:08
【问题描述】：

我有一个如下所示的屏幕截图，我必须在 html/css 中复制它。

附件是上面截图的fiddle，我现在可以复制它。

问题陈述：

我想知道 我需要在 fiddle 中的内联样式中进行哪些更改，以便能够限制边框的长度。此刻，它正在覆盖整个屏幕。

为了实现上面的截图，我使用的代码的 sn-ps 是：

<tr>
   <td style="text-align:left;padding-left:10%;padding-bottom:1%;">poster: donald duck</td>
   <td style="text-align:center;;padding-left:10%;padding-bottom:1%;">customer: donald duck</td>
</tr>

【问题讨论】：

标签： html css border

【解决方案1】：

根据您在fiddle 中提供的代码，您在表格标签中设置宽度属性 width="100%"，尝试将其设置为您想要的任何值。

<table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-size: 
20px;
...
">

到

<table cellpadding="0" cellspacing="0" border="0" width="600" style="font-size: 
20px;
...
">

【讨论】：

【解决方案2】：

您可以尝试这样做。

您需要添加margin: 0 auto; 使其居中对齐

设置table的width，使其有限制，不会占据整个屏幕。

请看下面的代码。

	<tr>
      <td>
        <table cellpadding="0" cellspacing="0" border="0" width="50%" style="
    margin: 0 auto;
    font-size: 20px;
    border-bottom: 2px solid #484848;
    border-top: 2px solid #484848;
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 5%;
    padding-right: 5%;
">
          <tr>
            <td style="text-align:left;padding-bottom:1%;">poster: donald duck</td>
            <td style="text-align:left;padding-bottom:1%;padding-left: 10%;">customer: donald duck</td>
          </tr> 
          <tr>
            <td style="text-align:left;padding-bottom:1%;">phone: 613-613-6134</td>
            <td style="text-align:left;padding-bottom:1%;padding-left: 10%;">phone: 613-613-6134</td>
          </tr> 
          <tr>
            <td style="text-align:left;padding-bottom:1%;">email: dduck@gmail.com</td>
            <td style="text-align:left;padding-bottom:1%;padding-left: 10%;">email: dduck@gmail.com</td>
          </tr>   		  
        </table>
      </td>
    </tr>

【讨论】：