[thelist] Stuck on css table borders

ox4dboy at comcast.net ox4dboy at comcast.net
Wed Sep 15 22:02:00 CDT 2004


>The inner
>borders should be 1px and black, but they are grey and thick.
>
> I always seem to have a problem with the table boards and
>stylesheets.  Any help is appreciated.
>
>http://css.redirectme.net/ - page
>http://linuxdev/cia/includes/style.css - sytlesheet

Chirs,

I cannot access the url you provided (might be a Mac/Safari redirect thing - is that link in fact a redirect?), BUT I think I can imagine the problem you are having.  Here is one suggestion, even though I cannot see what it is that you are trying to accomplish.  The borders are thick in some places b/c there is an overlapping border style declared.  One possible solution is the follwoing:

<style type="text/css">
/* put a 1px black border on the /*
/* table's top and right edge /*
.tableborder {
	border-top: 1px #000 solid;
	border-right: 1px #000 solid;
	}
/* put a 1px black border on every /*
/* TD in any table with a class of /*
/* "tableborder", BUT only on the /*
/* bottom and left of each TD  /*
.tableborder td {
	border-bottom: 1px #000 solid;
	border-left: 1px #000 solid;
	}
</style>

So your table would simply be "like" this:

<table class="tableborder" cellpadding="0" cellspacing="0">
    <tr>
         <td>this td has a border on its bottom and left side</td>
         <td>this td has a border on its bottom and left side</td>
         <td>this td has a border on its bottom and left side</td>
    </tr>
    <tr>
         <td>this td has a border on its bottom and left side</td>
         <td>this td has a border on its bottom and left side</td>
         <td>this td has a border on its bottom and left side</td>
    </tr>
    <tr>
         <td>this td has a border on its bottom and left side</td>
         <td>this td has a border on its bottom and left side</td>
         <td>this td has a border on its bottom and left side</td>
    </tr>
</table>

Each TD has a left and bottom border (thanks to ".tableborder td"), making what appears to be a bunch of sideways "L" shapes.  Then, on top of those sideways "L" shapes is the table's border, which is only on the tables top and right side (thanks to ".tableborder").  ".tableborder" closes off the open space left by the "L" on the TDs contained by the main table.  I am not sure if you can use this exact suggestion, but it should give you something to think about.

What the table would look like with just ".tableborder td"  

|__|__|__
|__|__|__
|__|__|__

What the table would look like with just ".tableborder"
________
               |
               |
               |

What the table would look like with ".tableborder td"
 ________
|__|__|__|
|__|__|__|
|__|__|__|

--
Designer/Illustrator


> Can someone please take a minute and look at my calendar page and see
> why the style sheet is not changing the borders correctly?  The outer
> border is working fine, however the inner boxes are not.  The inner
> borders should be 1px and black, but they are grey and thick.
> 
>  I always seem to have a problem with the table boards and
> stylesheets.  Any help is appreciated.
> 
> http://css.redirectme.net/ - page
> http://linuxdev/cia/includes/style.css - sytlesheet
> 
> Thanks
> Chris
> -- 
> 
> News! - Evolt.org conference for web professionals. 
> 17-19 September 2004 in Toronto, Canada. 
> Details at http://TOevolt.org
> 
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
> 
> For unsubscribe and other options, including the Tip Harvester 
> and archives of thelist go to: http://lists.evolt.org 
> Workers of the Web, evolt ! 


More information about the thelist mailing list