CSS how to create a border around part of a table 1

gus121 · Apr 23, 2003

Hi am struggling with the challenge with css where i wish to create a blue border around part of a table. I tried creating a span element giving it a class from the style sheet and using CSS border-right, border-left border-bottom attributes to create a border around part of the table but this did not work. I then tried creating a boarder on the left and the right of the table. Then setting the border as 0 for left and right this did not work as the border still shows. please cut and paste this code into HTML editor and give it a go. Thanks.

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {color: black; background: #cbe5fe;}
table { width: 280px; border-right: solid #5387B8 1px ; border-left: solid #5387B8 1px; }
tr td{font-size: 75%; font-family: Arial, Helvetica, Verdana, sans-serif; padding: 0.1em 0.2em 0;}
tr.heading td{background: #5387B8; font-weight: bold; font-size: 85%; font-family: Arial, Helvetica, Verdana, sans-serif; color: white; border: solid #5387B8; border-top: 1px;}
span.table-body td{background: #f2f2f2; font-weight: bold;}
tr.footer td{border-right: 0 ; border-left: 0; border-top: solid #5387B8 1px;}
</style>
</head>

<body>

<form name="register" method="post" action="register_site.asp?action=Submit_Validate">
<div align="center"> <table cellspacing="0">
<tr class="heading">
<td colspan="2" >
Your Details:
</td>
</tr>
<span class="table-body">
<tr>
<td width="35%"> </td>
<td width="65%">
<input type="hidden" name="existing_email" value="angus.grant@tdci.eu.com">
<input type="hidden" name="Mask" value="1">
</td>
</tr>
<tr>
<td width="35%">
<div align="left">Title:  
</div>
</td>
<td width="65%">
<select name="Title">
<option value="Mr" >Mr</option>
<option value="Mrs" >Mrs</option>
<option value="Miss" >Miss</option>
<option value="Dr">Dr</option>
</select>
</td>
</tr>
<tr>
<td width="35%">
<div align="left"><span class="basketoverview">Forename:</span>  
</div>
</td>
<td width="65%">
<input type="text" name="Forename" size="28" value="Angus " maxlength="50">
</td>
</tr>
<tr>
<td width="35%" height="32">
<div align="left"><span class="basketoverview">Surname:</span>  
</div>
</td>
<td width="65%" height="32">
<input type="text" name="Sirname" size="28" value="Grant " maxlength="50">
</td>
</tr>
<tr>
<td width="35%">
<div align="left"><span class="basketoverview">E-mail: </span>  
</div>
</td>
<td width="65%">
<input type="text" name="Email_Address" value="angus.grant@tdci.eu.com" size="28" maxlength="50">
</td>
</tr>
<tr>
<td width="35%" height="19"> </td>
<td width="65%" height="19"> </td>
</tr>
</span>
<tr class="footer">
<td colspan="2">
<div align="right">
<input type="submit" name="Submit" onclick="return checkEmail(this)" value="Send">
</div>
</td>
</tr>
</table></div>
</form>

Angus

http\\

http://www.TDCi.eu.com

http\\

http://www.sailgb.com

Mighty · Apr 23, 2003

Why not just add a border to the cells that you want to have a border around. Add a new td class and use that to display cells with a border.

td.bordered{font-size: 75%; font-family: Arial, Helvetica, Verdana, sans-serif; padding: 0.1em 0.2em 0; border: 1px solid black;}

Then forget your span and use the new td class to display a border.

<tr>
<td class="bordered" width="35%"> </td>
<td class="bordered" width="65%">
<input type="hidden" name="existing_email" value="angus.grant@tdci.eu.com">
<input type="hidden" name="Mask" value="1">
</td>
</tr>

Mighty

gus121 · Apr 23, 2003

I resolved this similar to your method. It however does not work in netscape quite right. misses the border of the top right cell.

Angus

http\\

http://www.TDCi.eu.com

http\\

http://www.sailgb.com

mansii · Apr 23, 2003

Try to declare all sides of the border:

td.bordered{
border-color: #0000ff;
border-style: solid;
border-width: 2px 1px 1px 1px;
}

Play arround on border-width's value.

regards

gus121 · Apr 23, 2003

Hi mansii I tried that approach still with the same result.
Here is the source code:

<style type="text/css">
body {color: black; background: #cbe5fe;}
table { width: 280px;}
form input {border: 1px solid #000000;}
form select {border: 1px solid #000000;}
tr td{font-size: 75%; font-family: Arial, Helvetica, Verdana, sans-serif; padding: 0.1em 0.2em 0;}
tr.heading td{background: #5387B8; font-weight: bold; font-size: 85%; font-family: Arial, Helvetica, Verdana, sans-serif; color: white; border-color: #5387B8; border-style: solid; border-width: 1px 1px 0 1px;}
td.leftborder {border-color: #5387B8; border-style: solid; border-width: 0 0 0 1px; background: #f2f2f2; font-weight: bold;}
td.rightborder { border-color: #5387B8; border-style: solid; border-width: 0 1px 0 0; background: #f2f2f2; font-weight: bold;}
tr.footer td{border-top: solid #5387B8 1px;}
tr.footer input.button {width: 60px; background-color : #757575; color: #ffffff;}
</style>
</head>

<body>

<form name="register" method="post" action="register_site.asp?action=Submit_Validate">

<div align="center"> <table cellspacing="0">
<tr class="heading">
<td colspan="2" >
Your Details:
</td>
</tr>
<tr>
<td class="leftborder" width="35%"> </td>
<td class="rightborder" width="65%">
<input type="hidden" name="existing_email" value="angus.grant@tdci.eu.com">
<input type="hidden" name="Mask" value="1">

</td>
</tr>
<tr>
<td class="leftborder" width="35%">
<div align="left">Title:
</div>
</td>
<td class="rightborder" width="65%">
<select name="Title">
<option value="Mr" >Mr</option>

<option value="Mrs" >Mrs</option>
<option value="Miss" >Miss</option>
<option value="Dr">Dr</option>
</select>
</td>
</tr>
<tr>
<td class="leftborder" width="35%">
<div align="left"><span class="basketoverview">Forename:</span>  
</div>

</td>
<td class="rightborder" width="65%">
<input type="text" name="Forename" size="28" value="Angus " maxlength="50">
</td>
</tr>
<tr>
<td class="leftborder" width="35%">
<div align="left"><span class="basketoverview">Surname:</span>  
</div>
</td>

<td class="rightborder" width="65%">
<input type="text" name="Sirname" size="28" value="Grant " maxlength="50">
</td>
</tr>
<tr>
<td class="leftborder" width="35%">
<div align="left"><span class="basketoverview">E-mail: </span>  
</div>
</td>
<td class="rightborder" width="65%">
<input type="text" name="Email_Address" value="angus.grant@tdci.eu.com" size="28" maxlength="50">

</td>
</tr>
<tr>
<td class="leftborder" width="35%" height="19"> </td>
<td class="rightborder" width="65%" height="19"> </td>
</tr>
<tr class="footer">
<td colspan="2">
<div align="right">
<input class="button" type="submit" name="Submit" onclick="return checkEmail(this)" value="Send">
</div>

</td>
</tr>
</table></div>
</form>

Angus

http\\

http://www.TDCi.eu.com

http\\

http://www.sailgb.com

deecee · Apr 23, 2003

heres a little work around, but it works best in fixed dimension cells

say you have a cell and you want a 1px black border on left and bottom, make that cell background black then change the alignemnt to left and top.

draw a table in the cell 1px smaler in widht and height. and you are done.

[Hammer]
Nike Failed Slogans -- "Just Don't Do It!"

mansii · Apr 24, 2003

Try to put a non-breaking-space (see the blue colored text. I have difficulty in writing in a & format here hee.. hee..):

<style type="text/css">
body {color: black; background: #cbe5fe;}
table { width: 280px;}
form input {border: 1px solid #000000;}
form select {border: 1px solid #000000;}
tr td{font-size: 75%; font-family: Arial, Helvetica, Verdana, sans-serif; padding: 0.1em 0.2em 0;}
tr.heading td{background: #5387B8; font-weight: bold; font-size: 85%; font-family: Arial, Helvetica, Verdana, sans-serif; color: white; border-color: #5387B8; border-style: solid; border-width: 1px 1px 0 1px;}
td.leftborder {border-color: #5387B8; border-style: solid; border-width: 0 0 0 1px; background: #f2f2f2; font-weight: bold;}
td.rightborder { border-color: #5387B8; border-style: solid; border-width: 0 1px 0 0; background: #f2f2f2; font-weight: bold;}
tr.footer td{border-top: solid #5387B8 1px;}
tr.footer input.button {width: 60px; background-color : #757575; color: #ffffff;}
</style>
</head>

<body>

<form name="register" method="post" action="register_site.asp?action=Submit_Validate">

<div align="center"> <table cellspacing="0">
<tr class="heading">
<td colspan="2" >
Your Details:
</td>
</tr>
<tr>
<td class="leftborder" width="35%"> </td>
<td class="rightborder" width="65%">
<input type="hidden" name="existing_email" value="angus.grant@tdci.eu.com">
<input type="hidden" name="Mask" value="1">

</td>
</tr>
<tr>
<td class="leftborder" width="35%">
<div align="left">Title:
</div>
</td>
<td class="rightborder" width="65%">
<select name="Title">
<option value="Mr" >Mr</option>

<option value="Mrs" >Mrs</option>
<option value="Miss" >Miss</option>
<option value="Dr">Dr</option>
</select>
</td>
</tr>
<tr>
<td class="leftborder" width="35%">
<div align="left"><span class="basketoverview">Forename:</span>
</div>

</td>
<td class="rightborder" width="65%">
<input type="text" name="Forename" size="28" value="Angus " maxlength="50">
</td>
</tr>
<tr>
<td class="leftborder" width="35%">
<div align="left"><span class="basketoverview">Surname:</span>
</div>
</td>

<td class="rightborder" width="65%">
<input type="text" name="Sirname" size="28" value="Grant " maxlength="50">
</td>
</tr>
<tr>
<td class="leftborder" width="35%">
<div align="left"><span class="basketoverview">E-mail: </span>
</div>
</td>
<td class="rightborder" width="65%">
<input type="text" name="Email_Address" value="angus.grant@tdci.eu.com" size="28" maxlength="50">

</td>
</tr>
<tr>
<td class="leftborder" width="35%" height="19">non-breaking-space</td>
<td class="rightborder" width="65%" height="19">non-breaking-space</td>
</tr>
<tr class="footer">
<td colspan="2">
<div align="right">
<input class="button" type="submit" name="Submit" onclick="return checkEmail(this)" value="Send">
</div>

</td>
</tr>
</table></div>
</form>

Regards,
mansii

Mighty · Apr 24, 2003

mansii has hit the nail on the head. If you have a completely empty cell, a border won't be displayed. You need to user either   or <BR> as the content of the cell.

Instead of:

<td class="leftborder" width="35%"> </td>

try:

<td class="leftborder" width="35%"><BR></td>

Mighty

mansii · Apr 24, 2003

Uh, one more thing, see the broken border on the upper-left side? Try to move these lines:

<tr>
<td class="leftborder" width="35%"> </td>
<td class="rightborder" width="65%">
<input type="hidden" name="existing_email" value="angus.grant@tdci.eu.com">
<input type="hidden" name="Mask" value="1">

</td>
</tr>

just before the </form> tag, and remove the tr and td tags. Like this, I guess:

<input type="hidden" name="existing_email" value="angus.grant@tdci.eu.com">
<input type="hidden" name="Mask" value="1">
</form>

Try and try

gus121 · Apr 24, 2003

Thanks mansii I moved the hidden form elements just after the opening form tag and used the   instead. Hay presto the border appeared fine in both browsers. I just need to work out how to pad out all form elements and get rid of the default border around the select box use the input element style because: form select {border: 1px solid #000000;} does not work.

Any Ideas.

Thanks Again

Angus

mansii · Apr 24, 2003

Gus,
I don't quite understand your problem. If I'm right, you want to remove the input border, right?

Line 4 of your code:
form input {border: 1px solid #000000;}
Try to change to:
form input {border: 0px none;}

gus121 · Apr 24, 2003

no my style sheet which creates a border fine around the input form elements. however appeares to ignore the dropdown select element. My question is how do I apply a style to dropdown select element. thanks

Angus

mansii · Apr 24, 2003

Unfortunately, I can't find a way to acomplish that. We really need a real guru here.
Gimme a sign when this is solved, okay?

gus121 · Apr 24, 2003

Still think its possible however this is all i could find on the subject:

thread215-521474

Angus

mansii · Apr 24, 2003

I agree with him. I myself have been searching for this solution too, but it seems that we can only play with what is listed in the select box, not the select box itself. But keep on looking.

mansii

flashnut · Apr 25, 2003

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS how to create a border around part of a table 1

gus121

Technical User

Mighty

Programmer

gus121

Technical User

mansii

Programmer

gus121

Technical User

deecee

Technical User

mansii

Programmer

Mighty

Programmer

mansii

Programmer

gus121

Technical User

mansii

Programmer

gus121

Technical User

mansii

Programmer

gus121

Technical User

mansii

Programmer

flashnut

Instructor

Similar threads

Part and Inventory Search

Sponsor