html - HTML 边框“宽度”缩小尺寸

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