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

Question

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

附件是我现在可以复制的上述屏幕截图的 fiddle。

问题陈述：

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

我为实现上述屏幕截图而使用的代码片段是：

<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>

Answer 1

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

<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;
...
">

Answer 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>

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

How to limit the length of a border in css?

html

css

border