如何限制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中提供的代码，在表标签width =“ 100％”中设置width属性，尝试将其设置为所需的任何值。

    <select class="video_home_flex_select">
        <option value="con_1">Blue </option>
        <option value="con_2" selected="selected">Red</option>
        <option value="con_3">Green</option>
    </select>

<div class="flex_parent">
   Hey I am changing color!
</div>

到

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

Answer 2

您可以尝试这样做。

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

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

请参见下面的代码。

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