CSS table border issue

sirlemonhead

sirlemonhead

sirlemonhead

Associate
Joined
14 Dec 2005
Posts
563
Location
Dublin
Hi,

I want to have tables as follows..

table.gif


What i'm trying to do is put a 1px wide white border under each blue TD on the left side, so I get something that looks like this:

table2.gif


Those yellow asterisks are in a TD of their own, so the whole table you see in those images is 3 TDs wide.

My CSS so far is:

Code: 
table.form_table {
	border-collapse: collapse;
	border-spacing: 0px;
}

.title {
	background-color: #84A9CD;
	padding-right: 15px;
	padding-left: 6px;
	vertical-align: top;
	border-right: 0px;
}

.entry {
	border: 1px solid gray;
	padding-left: 5px;
}

table.form_table td {
	padding: 3px 3px 3px 3px;
	vertical-align: top;
	border: 1px solid #84A9CD;
}

.mandatory {
	background-color: #84A9CD;
	vertical-align: top;
	border-left: 0px;
}

mandatory is applied to the middle TDs where the asterisks reside, title is applied to the first TD to give the blue background, and entry is used on the 3rd TD where the form items go.

Can anyone help me sort this out please?
 
PHP: 
<table class="form_table">
		<tr>
			<td class="title">Product Name</td>
			<td class="title"><img src="images/mandatory.png" /></td>
			<td class="entry"><input type="text" name="prod_name" id="prod_name" maxlength="50" /></td>
		</tr>
		<tr>
			<td class="title">Product Type</td>
			<td class="title"><img src="images/mandatory.png" /></td>
			<td class="entry"><select name="prod_type_id" id="prod_type_id">
				<?php
					foreach ($vProdTypes as $vProdType) { 
						echo "<option value = $vProdType->id selected> $vProdType->prod_type</option>";
					}
				?>
				</select>
			</td>
		</tr>
		<tr>
			<td class="title">Product Description</td>
			<td class="title"><img src="images/mandatory.png" /></td>	
			<td class="entry"><!--<input type="text" name="prod_description" id="prod_description"  maxlength="255" />--><textarea cols="40" rows="5" name="prod_description" id="prod_description"></textarea></td>
		</tr>
		<tr>
			<td class="title">Product Cost</td>
			<td class="title"><img src="images/mandatory.png" /></td>
			<td class="entry"><input type="text" name="prod_cost" id="prod_cost"  maxlength="50" /></td>
		</tr>
		<tr>
			<td class="title">Product Quantity</td>
			<td class="title"><img src="images/mandatory.png" /></td>
			<td class="entry"><input type="text" name="prod_quantity" id="prod_quantity"  maxlength="50" <?php if(isset($vRealName)){ echo "value='$vRealName'"; } ?>/></td>
		</tr>
	</table>
 
You must log in or register to reply here.
Back
Top Bottom