SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict amy.damnit's Avatar
    Join Date
    Sep 2009
    Posts
    336
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do you Hide a Cell Border?

    I have a table that has merged rows but also regular, unmerged rows/cells.

    I set this style...

    Code:
      td {
        margin: 0px;
        padding: 5px;
        border: 1px solid #808080;
        text-align: left;
    
      }
    for simplicity.

    How do I tell CSS to "erase" the inside borders on a block of 3 merged rows so there is just an outside border?

    I tried...

    Code:
        border: 0px solid #808080;
    but that didn't work.


    Amy

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    border-collapse:collapse;
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Addict amy.damnit's Avatar
    Join Date
    Sep 2009
    Posts
    336
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan,

    Quote Originally Posted by RyanReese View Post
    border-collapse:collapse;
    That won't work.

    (This would be much easier if you could see...)

    I have 3 rows but I only want an outside border. So the border between Row #1 and Row #2 should disappear and the border between Row #2 and Row #3 should disappear. But I still need the outside border.

    Understand these "3 rows" are a subset of a larger table...

    If I recall correctly, all "border-collapse:collapse;" does is to collapse borders into a single border when possible.



    Amy

  4. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Something like this should work.

    http://rockatee.com/temp/table-borders.html

    Code:
    <table>
        <tbody class="border">
            <tr>
                <td>Table Cell with borders</td>
                <td>Table Cell with borders</td>
                <td>Table Cell with borders</td>
            </tr>
            <tr class="noborders">
                <td>Table Cell without borders</td>
                <td>Table Cell without borders</td>
                <td>Table Cell without borders</td>
            </tr>
            <tr class="noborders">
                <td>Table Cell without borders</td>
                <td>Table Cell without borders</td>
                <td>Table Cell without borders</td>
            </tr>
        </tbody>
    </table>
    Code CSS:
        table {
            border-collapse: collapse;
            margin:100px auto;
        }
     
        td {
            margin: 0px;
            padding: 5px;
            text-align: left;
            border:1px solid #080808;
        }
     
        .border {
            border: 1px solid #080808;
        }
     
        .noborders td {
            border:0;
        }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    If you just want a border around the whole table, but not around the cells, this would work too:

    Code:
    table {border: 1px solid #808080;}
    td {border: 0;}

  6. #6
    SitePoint Addict amy.damnit's Avatar
    Join Date
    Sep 2009
    Posts
    336
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    Something like this should work.

    http://rockatee.com/temp/table-borders.html

    Code:
    <table>
        <tbody class="border">
            <tr>
                <td>Table Cell with borders</td>
                <td>Table Cell with borders</td>
                <td>Table Cell with borders</td>
            </tr>
            <tr class="noborders">
                <td>Table Cell without borders</td>
                <td>Table Cell without borders</td>
                <td>Table Cell without borders</td>
            </tr>
            <tr class="noborders">
                <td>Table Cell without borders</td>
                <td>Table Cell without borders</td>
                <td>Table Cell without borders</td>
            </tr>
        </tbody>
    </table>
    Code CSS:
        table {
            border-collapse: collapse;
            margin:100px auto;
        }
     
        td {
            margin: 0px;
            padding: 5px;
            text-align: left;
            border:1px solid #080808;
        }
     
        .border {
            border: 1px solid #080808;
        }
     
        .noborders td {
            border:0;
        }
    Thanks, Maleika, that was right on the money!!!

    It took me quite some time to figure out how everything worked, and more so, where my code was slightly off, but my end result looks great.

    Hopefully you'll see it sometime soon.


    Amy

  7. #7
    SitePoint Addict amy.damnit's Avatar
    Join Date
    Sep 2009
    Posts
    336
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    If you just want a border around the whole table, but not around the cells, this would work too:

    Code:
    table {border: 1px solid #808080;}
    td {border: 0;}
    Ralph,

    Yah, I already knew that, but thanks for the suggestion anyway.


    Amy

    P.S. You shouldn't need the "td {border: 0;}" part, though.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by amy.damnit View Post
    Ryan,
    That won't work.

    ...


    If I recall correctly, all "border-collapse:collapse;" does is to collapse borders into a single border when possible.

    Amy
    I waas under the assumption you wnated only 1px border between the cells so I offered the border-collapse. Sorry about that
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Addict amy.damnit's Avatar
    Join Date
    Sep 2009
    Posts
    336
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    I waas under the assumption you wnated only 1px border between the cells so I offered the border-collapse. Sorry about that
    No problem.

    That is a downside when we're stuck with text-only communication!

    In a few days I should have a web-hosting account and then I'll be able to post pretty pictures/screenshots/actual webpages for you to see when I ask questions which should help immensely!

    Thanks,


    Amy

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by amy.damnit View Post
    No problem.

    That is a downside when we're stuck with text-only communication!

    In a few days I should have a web-hosting account and then I'll be able to post pretty pictures/screenshots/actual webpages for you to see when I ask questions which should help immensely!

    Thanks,


    Amy
    You can upload your screenshots to flickr or photobucket . That's what I used to do lol. Or just upload the attachment (which takes time to approve)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    UK
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are plenty of free sites to upload your pics, just use google.


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
  •