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/