SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard triexa's Avatar
    Join Date
    Dec 2002
    Location
    Canada
    Posts
    2,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hide border of table

    I have a 1px border around my styled tables.

    I have something to the effect of:

    Code:
    <table>
        <tr>
            <th>Header text</th>
            <th>header text</th>
        </tr><tr>
            <td>Text</td>
            <td>More text</td>
        </tr><tr>
            <td colspan="2">SPACER</td>
        </tr><tr>
            <th>Header text</th>
            <th>header text</th>
        </tr><tr>
            <td>Text</td>
            <td>More text</td>
        </tr>
    </table>
    Is there anyway I can hide the table border for the row of that SPACER? I don't want the lines to run down the sides...
    AskItOnline.com - Need answers? Ask it online.
    Create powerful online surveys with ease in minutes!
    Sign up for your FREE account today!
    Follow us on Twitter

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you post the CSS. (I could make it myself, but I'd rather just do it to yours)

  3. #3
    SitePoint Wizard triexa's Avatar
    Join Date
    Dec 2002
    Location
    Canada
    Posts
    2,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess something like this:

    Code:
    <style type="text/css">
        table { border:1px solid #000000; }
        table th { background-color:#CCCCCC; }
        table td { padding:5px; background-color:#EEEEEE; }
    </style>
    <table cellpadding="0" cellspacing="0">
        <tr>
            <th>Header text</th>
            <th>header text</th>
        </tr><tr>
            <td>Text</td>
            <td>More text</td>
        </tr><tr>
            <td colspan="2" style="background-color:#FFFFFF">SPACER</td>
        </tr><tr>
            <th>Header text</th>
            <th>header text</th>
        </tr><tr>
            <td>Text</td>
            <td>More text</td>
        </tr>
    </table>
    AskItOnline.com - Need answers? Ask it online.
    Create powerful online surveys with ease in minutes!
    Sign up for your FREE account today!
    Follow us on Twitter

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    New Zealand
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well the following works in FF but not IE
    HTML Code:
    <style type="text/css">
        table { 
        border:1px solid #000000;
        border-collapse: collapse;
        }
        table th { background-color:#CCCCCC; }
        table td { padding:5px; background-color:#EEEEEE; }
    
        td.spacer {
        background-color: #FFFFFF;
        border-right: 1px solid #fff;
        border-left:  1px solid #fff;
        }
    
    </style>

    HTML Code:
    <table cellpadding="0" cellspacing="0">
        <tr>
            <th>Header text</th>
            <th>header text</th>
        </tr><tr>
            <td>Text</td>
            <td>More text</td>
        </tr><tr>
            <td colspan="2" class="spacer">SPACER</td>
        </tr><tr>
            <th>Header text</th>
            <th>header text</th>
        </tr><tr>
            <td>Text</td>
            <td>More text</td>
        </tr>
    </table>

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Taking KiwiJohn's example and modifying it:

    Code:
    table { 
    	border-collapse: collapse;
    	}
    	table th { border:1px solid #000; background-color:#ccc; }
    	table td { border:1px solid #000; padding:5px; background-color:#eee; }
    
    	td.spacer {
    	background-color: #FFFFFF;
    	border-right: 1px solid #fff;
    	border-left:  1px solid #fff;
    	}
    will work but you'll also need to add additional classes to your HTML to remove the inner borders from the table cells.

  6. #6
    SitePoint Wizard triexa's Avatar
    Join Date
    Dec 2002
    Location
    Canada
    Posts
    2,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ya, I didn't particlarly want to add class definitions to more tr's/td's than needed, but I guess it provides the simplest solution so that is what I will do!
    AskItOnline.com - Need answers? Ask it online.
    Create powerful online surveys with ease in minutes!
    Sign up for your FREE account today!
    Follow us on Twitter


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
  •