HTML边框＆＃34;宽度＆＃34;缩小尺寸

Question

请参阅以下文件：

<table>
  <tr>
    <td>
      <p>foo bar baz</p>
    </td>
  </tr>
</table>

和此：

td {
  padding: 10px;
  border-bottom: 1pt solid gray;
}

会产生类似

的内容

规则始终是表格单元格的宽度。是否有任何CSS / HTML方式使规则更小（水平占用更少的空间）？

我需要规则是一些小于单元格宽度的指定大小。它应该是这样的（我希望你明白这一点 - 当然，双击很容易）：

   123.44
  2312.49
 --------
    12.12
  1231.44
 ========
  1234.33

Answer 1

您的意思是底部边框应该比td的宽度短吗？在这种情况下，这是不可能的，但是您可以添加一个表示边框的元素，并为该元素提供一个小于100％的宽度。从技术上讲，我会建议hr但div可以做同样的事情，也许更容易理解。

<强> HTML

<table>
  <tr>
    <td>
      <p>foo bar baz</p>
      <div style="width:75%;border-bottom:1px solid #000;"> </div>
    </td>
  </tr>
</table>

现场演示
 http://jsfiddle.net/Zs9dG/

Answer 2

如果您要在每个表格单元格中添加一个段落，为什么不在其上添加边框？

td > p {
    display: inline;
    border-bottom: 1pt solid gray;
}

将<p>设置为display: inline将意味着边框与其中的内容一样宽。然后你可以给表格单元格更多的水平填充，你应该得到你所追求的效果。

Answer 3

您可以使用html代码管理它，否则使用ul和li它会更方便。

   <table>
      <tr>
        <td>
          <p>123.44</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>12312.49</p>
        </td>
      </tr>
      <tr>
        <td>
          <p> -------- </p>
        </td>
      </tr>
      <tr>
        <td>
          <p>12.12</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>1231.44</p>
        </td>
      </tr>
      <tr>
        <td>
          <p> ======== </p>
        </td>
      </tr>
      <tr>
        <td>
          <p> 1234.33 </p>
        </td>
      </tr>
    </table>