HTML border "width" reduced size - html

Question

See the following documents:
<table>
<tr>
<td>
<p>foo bar baz</p>
</td>
</tr>
</table>
and this:
td {
padding: 10px;
border-bottom: 1pt solid gray;
}
which results in something like
The rule is always the width of the table cell. Is there any CSS/HTML way of making the rule smaller (taking up less space horizontally)?
I need the rule to be some specified size which is smaller than the cell width. This is how it should look like (I hope you get the point - and the double dash is easy, of course):
123.44
2312.49
--------
12.12
1231.44
========
1234.33

Answer 1

Do you mean that the bottom border should be shorter than the width of the td? In that case this is not possible, however you could add an element that represents your border and give that element a width shorter than 100%. Technically I would advise a hr but div could do the same thing and is perhaps easier to understand.
HTML
<table>
<tr>
<td>
<p>foo bar baz</p>
<div style="width:75%;border-bottom:1px solid #000;"> </div>
</td>
</tr>
</table>
Live demo
http://jsfiddle.net/Zs9dG/

Answer 2

If you are going to have a paragraph in each table cell, why not put the border on that?
td > p {
display: inline;
border-bottom: 1pt solid gray;
}
Setting the <p> to display: inline will mean the border is as wide as the content inside it. You could then give the table cells more horizontal padding and you should end up with the effect you are after.

Answer 3

You can manage it with the html code, otherwise use ul and li it's much more convenient.
<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>