As far as I can see the problem is that you are not being true to the table.
This is the structure you are using.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
border-right:1px solid #000
<div class="dt" style="width:100%">
<div class="dtc"> cell content </div>
<div class="dtc">cell content </div>
<!-- end tr -->
[B] <hr />[/B]
Run the above code and it exhibits the problem you mention.
It would be the same as saying.
<table cellspacing="0" cellpadding="0">
[B] <hr />[/B]
You can't have a hr in that position. All content must be within a table cell. The hr is basically being treated as the first cell in an anonymous row.
For your routine to work correctly you would need to follow the same format that you would in a table to get a horizontal rule. Either close the table or apply a border to the bottom of the last cells.
The reason that the border stretches 100% on some elements is because you have actually omitted the table cell structure altogether and effectively have one 100% wide cell. You go straight from a table row into content.
<label for="ctl00_MainContent_fvRestaurantDetail_repContacts_ctl01_txtTitle" id="ctl00_MainContent_fvRestaurantDetail_repContacts_ctl01_lblName">Name</label>
The rules for the css table model say that the first cell of each row belongs to the first column which means that where you have just the "hr" in that odd position the browsers will automatically construct the missing elements such as a table-row and assume that the cell is the same width as the first cell in the previous rows.
I should also point out that your data looks tabular and for that reason the table element would actually be the most semantic element to use. The CSS display:table property is meant for producing only the visual effect of a table structure. It is not meant as a replacement for tables that hold tabular data.
Hope that makes some sense