CSS Forum

**jim.thornton** · 08-04-2006, 12:44 AM

HTML Code:

<style>
#compare-left {
	background-color:#ECEEFF;
	width:240px;
	color:#000040;
	border:1px solid #000040;
}

#compare-left th.line1 {
	background-color:#000040;
	color:#FFFF04;
	text-align:center;
	font-weight:bold;
	padding:0px 5px 0px 5px;
}

#compare-left th.line2 {
	background-color:#000040;
	color:#FFFFFF;
	vertical-align:top;
	padding:0px 5px 0px 5px;
}

#compare-left td {
	background-color:#ECEEFF; 
	padding:0px 5px 0px 5px;
	vertical-align:top;
}

#compare-left td.total {
	font-weight:bold;
}

#compare-left td.subtotal {
	border-top:1px solid #000040;
	font-weight:bold;
}
</style>

HTML Code:

<table id="compare-left" cellpadding="0" cellspacing="0">
	<tr>
		<th colspan="3" class="line1">Before Debt Consolidation</th>
	</tr>
	<tr>
		<th width="110px" class="line2" align="left">Item</th>
		<th width="75px" class="line2" align="right">Value</th>
		<th width="55px" class="line2" align="right">Pmt/Mth</th>
	</tr>
	<tr>
		<td colspan="3">&nbsp;</td>
	</tr>
	<tr>
		<td>House Value:</td>
		<td align="right">$275,000</td>
		<td align="right">&nbsp;</td>
	</tr>
	<tr>
		<td colspan="3">&nbsp;</td>
	</tr>
	<tr>
		<td>Mortgage:</td>
		<td align="right">$160,000</td>
		<td align="right">$1,261</td>
	</tr>
	<tr>
		<td>TD Visa:</td>
		<td align="right">$4,758</td>
		<td align="right">$143</td>
	</tr>
	<tr>
		<td>PC M/C:</td>
		<td align="right">$6,321</td>
		<td align="right">$189</td>
	</tr>
	<tr>
		<td>TD Line of Credit:</td>
		<td align="right">$9,765</td>
		<td align="right">$195</td>
	</tr>
	<tr>
		<td>Car 1:</td>
		<td align="right">$8,243</td>
		<td align="right">$247</td>
	</tr>
	<tr>
		<td>Car 2:</td>
		<td align="right">$12,946</td>
		<td align="right">$404</td>
	</tr>
	<tr>
		<td class="total">Total Debt:</td>
		<td align="right" class="subtotal">$202,033</td>
		<td align="right" class="subtotal">$2,439</td>
	</tr>
</table>

I'm trying to get the subtotal line (border) to not touch on the two right columns of the table. I tried using padding but that doesn't work.

How can I do this??

**ADAM Web Design** · 08-04-2006, 01:51 AM

cellspacing="1" might do the trick. It's not a CSS solution (the CSS solution would be margin: 1px

but you've already got cellspacing code so you're not adding anything.

**jim.thornton** · 08-04-2006, 10:51 AM

How is the CSS coding (standards wise)?

**vangogh** · 08-04-2006, 03:34 PM

I don't think there's an easy answer to get the subtotal border not to meet the end using css. I think the easiest way is actually to add a 4th column to the table that's a few px wide to get that space.

You're css coding looks fine too. You could probably save a little here and there, but it looks good.