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>
 
Code: 
table.form_table {
	border-collapse: collapse;
	border-spacing: 0px;
}

.title {
	background-color: #84A9CD;
	padding-right: 15px;
	padding-left: 6px;
	vertical-align: top;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
}

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

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

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

Seems to work ok for me. Btw these two lines arent supported by IE6/Netscape 5.5

border-collapse: collapse;
border-spacing: 0px;

According to dreamweaver :)
 
sirlemonhead said:
That looks good. Any way to stop it putting a white border on the very bottom title cell in a table?
Click to expand...

You see the 4th example on this page http://www.w3.org/TR/REC-CSS2/tables.html

Shows TR#row1. That method of using CSS requires giving every <td> tag an id. Would be simpler just to create a new style title_bottom or along those lines and apply it to the bottom cell.
 
You must log in or register to reply here.
Back
Top Bottom