SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard Pedro Monteiro's Avatar
    Join Date
    Sep 2002
    Location
    Lisbon
    Posts
    1,393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Very odd Cellspacing problem

    Regular HTML

    <table width="100%" border="0" cellpadding="0" cellspacing="0">

    CSS

    .tabletop {
    WIDTH: 100%; border: none; PADDING: 0px; border-spacing: 0px
    }

    How is this any different?

    The problem is, that the CSS is creating a cell spacing arround the entire table.

    Any idea how to solve this?

    Thank you for all the help

  2. #2
    SitePoint Wizard Pedro Monteiro's Avatar
    Join Date
    Sep 2002
    Location
    Lisbon
    Posts
    1,393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Made a little search and this might solve the prolem;

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

    Damn Browser compatibility.

  3. #3
    SitePoint Wizard Pedro Monteiro's Avatar
    Join Date
    Sep 2002
    Location
    Lisbon
    Posts
    1,393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That didn't quite do it.

  4. #4
    SitePoint Wizard Pedro Monteiro's Avatar
    Join Date
    Sep 2002
    Location
    Lisbon
    Posts
    1,393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From what I have been reading, Cellpadding and Cellspacing can't go.

  5. #5
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Here you go.

    Code:
     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title></title>
     <style type="text/css">
     table{
     	height: 100%;
     	width: 100%;
     	border-collapse: collapse;
     }
     td{
     	border: 1px solid black;
     }
     </style>
     </head>
     
     <body>
     	<table>
     	<tr>
     		<td>top left</td>
     		<td>top right</td>
     	</tr>
     	<tr>
     		<td>top left</td>
     		<td>top right</td>
     	</tr>
     	</table>
     </body>
     </html>
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  6. #6
    SitePoint Wizard Pedro Monteiro's Avatar
    Join Date
    Sep 2002
    Location
    Lisbon
    Posts
    1,393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you my friend. I had tried the Board Collapse, but it still doesn't quite work for me. Maybe it's due to the fact that I used border-collapse: collapse; and border-spacing: 0px;

  7. #7
    SitePoint Addict Johana Solendhal's Avatar
    Join Date
    Aug 2004
    Location
    Land of the free
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Had the same problem myself.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Thank you my friend. I had tried the Board Collapse, but it still doesn't quite work for me. Maybe it's due to the fact that I used border-collapse: collapse; and border-spacing: 0px;
    If you post an example of the whole code and what problems you are having and in which browsers then we might be able to see whats going wrong.

    New guys solution above should work in most modern browsers. However if you are looking for older browser support then leave the cellspacing and cellpadding in the html. (Its still valid and not deprecated.)

    border-collapse will collapse the space between the cells so that the double border becomes a single border.

    border-spacing (mozilla and good browsers only (not ie)) will adjust the spacing between the double borders of adjacent cells. Obvously if the borders have been collapsed then this had no effect. This is equal to cellspacing in html

    padding:0; on a td is equal to cellpadding="0"

    table {margin:0} will ensure there are no extra margins around the table.

    That should be enough to get it working

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •