SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Market Harborough, UK
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Blasted gaps between cells!

    Hi,

    I'm trying to display a table (yes, I do think I need a table!) with no borders but so that each row alternates the background colour to give an effect similar to the old-style computer listing paper.

    The site is dynamically generated with php and I've got the stiripes ok by having two class entries in my CSS for a <tr> and alternate the classes, but now for the rub.

    Each cell seems to get a white border around it to separate it from it's neighbours. I've tried setting margin and padding to 0 but to no effect. How can I get rid of the borders to give me what I need?

    My CSS is:-
    Code:
    tr.odd  {
       background-color:rgb(125,144,178);
       color:#000000;
       border-color:black;
       border-style:solid;
       border-width:0px 0px 0px 0px;
       margin:0px 0px 0px 0px;
    }
    tr.even  {
       background-color:rgb(63,99,145);
       color:#ffffff;
       border-color:black;
       border-style:solid;
       border-width:0px 0px 0px 0px;
       margin:0px 0px 0px 0px;
    }
    and the part of the html creating the table is:
    HTML Code:
    <table>
    <tr class = "odd"><td>&nbsp;Acland, Eloise&nbsp;</td><td>&nbsp;9&nbsp;</td><td>&nbsp;Art and Design&nbsp;</td><td>&nbsp;English&nbsp;</td><td>&nbsp;Geography&nbsp;</td><td>&nbsp;German ML1&nbsp;</td><td>&nbsp;History&nbsp;</td><td>&nbsp;Latin&nbsp;</td><td>&nbsp;Mathematics&nbsp;</td><td>&nbsp;Religious Education&nbsp;</td><td>&nbsp;Science&nbsp;</td></tr>
    <tr class = "even"><td>&nbsp;Addis, Katharine&nbsp;</td><td>&nbsp;9&nbsp;</td><td>&nbsp;Art and Design&nbsp;</td><td>&nbsp;English&nbsp;</td><td>&nbsp;French ML1&nbsp;</td><td>&nbsp;Geography&nbsp;</td><td>&nbsp;History&nbsp;</td><td>&nbsp;Latin&nbsp;</td><td>&nbsp;Mathematics&nbsp;</td><td>&nbsp;Religious Education&nbsp;</td><td>&nbsp;Science&nbsp;</td></tr>
    <tr class = "odd"><td>&nbsp;Ames, Caroline&nbsp;</td><td>&nbsp;9&nbsp;</td><td>&nbsp;Art and Design&nbsp;</td><td>&nbsp;English&nbsp;</td><td>&nbsp;French ML1&nbsp;</td><td>&nbsp;Geography&nbsp;</td><td>&nbsp;History&nbsp;</td><td>&nbsp;Latin&nbsp;</td><td>&nbsp;Mathematics&nbsp;</td><td>&nbsp;Religious Education&nbsp;</td><td>&nbsp;Science&nbsp;</td></tr>
    </table>
    Any ideas?

    Thanks,
    Paul Simpson, BSc, MCNI, MCNE

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    <table border="0" cellpadding="0" cellspacing="0">

    Yes, I know it is not CSS but there are a lot of issues with the CSS equivalents of cellpadding and cellspacing, namely called M$ Explorer.

    Most likely fails in M$ Explorer and it also helps to give both height and width values for the cells in the CSS.

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    adding "border-collapse: collapse;" to the style for your <table> tag will get rid of the gaps between cells in every browser except Mac IE if you're comfortable with that .


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
  •