Technical Discussion
  >> Web Design / HTML / Web hosting Forum


Register (or login) on our website and you will not see this ad.


These posts have been archived and can no longer be replied to or modified.
  Print Thread
Standard User deleted
(deleted) Sun 09-Jul-06 02:11:00
Print Post

Table cell border / CSS question


[link to this post]
 
Say I have some cells in a table, and I want to have each column to have a line at either side.

...But I only want a 1-pixel wide line.

At present, if I assign border-left and border-right CSS styles to a bunch of cells, I end up with the first cell having a 1-pixel wide line to the left, then each one after that having a pixel on either side - thus meaning there's a 2-pixel wide line between each column.

If I just have border-left or border-right, A line is missing from the start or end.

One solution seems to be to have a "final cell" style which has border-right, whereas the other cells just have border-left. This seems clumsy to me, and I just wondered if there was a "better" way...
Standard User Taras
(knowledge is power) Sun 09-Jul-06 11:16:34
Print Post

Re: Table cell border / CSS question


[re: deleted] [link to this post]
 
table code
<table width="90%" height="156" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="cellleft">&nbsp;</td>
<td class="cellright">&nbsp;</td>
<td class="cellright">&nbsp;</td>
<td class="cellright">&nbsp;</td>
<td class="cellright">&nbsp;</td>
<td class="cellright">&nbsp;</td>
</tr>
</table>

css code
.cellleft {
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #0000FF;
border-left-color: #000000;
}
.cellright {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FF0000;
}

tested in ie6 and ff 1.5.04



-----------------------------------------------------------------------
for cheaper hosting go to 50gigs.com
Standard User deleted
(deleted) Sun 09-Jul-06 14:02:51
Print Post

Re: Table cell border / CSS question


[re: Taras] [link to this post]
 
Yes, that's what I was trying to avoid doing.

I was wondering if there was a slightly more elegant way of doing that, which wouldn't involve having a separate style for the end cell.

Though I'm guessing now that it can't be done...


Register (or login) on our website and you will not see this ad.

Standard User Taras
(knowledge is power) Sun 09-Jul-06 16:01:08
Print Post

Re: Table cell border / CSS question


[re: deleted] [link to this post]
 
could add a column to the left and and just cellright all the way thru the row

-----------------------------------------------------------------------
for cheaper hosting go to 50gigs.com
Standard User deleted
(deleted) Sun 09-Jul-06 16:19:27
Print Post

Re: Table cell border / CSS question


[re: deleted] [link to this post]
 
Border collapse could well be your friend here. If you collapse the border you can give each cell a border on the left hand side and then just add a border to the right of the table to finish it off.

Here is a quick example I knocked up.
Standard User deleted
(deleted) Mon 10-Jul-06 01:41:29
Print Post

Re: Table cell border / CSS question


[re: deleted] [link to this post]
 
That's neat!

/ Googles to find out what the heck "border collapse" does!
Standard User deleted
(deleted) Mon 10-Jul-06 11:22:00
Print Post

Re: Table cell border / CSS question


[re: deleted] [link to this post]
 
border-collapse just makes adjacent borders join together rather than sitting beside each other - e.g. having two 1px borders on adjacent cells would normally result in a 2px border appearing on screen. Border-collapse would join them together and give you just a 1px border.
  Print Thread

Jump to