SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast djchazza's Avatar
    Join Date
    Jan 2004
    Location
    Sydney, Australia
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Table in a table style problem

    I have a table in a table. Pretty simple. The first (outer) table has a style sheet which sets some custom borders and paddings for its cells. The second (inner) table shouldn't inherit those styles. How do I solve that?

    Example:

    HTML Code:
    <table class="outer">
      <tr><td>
          Welcome
          <table class="inner">
            <tr><td>
               Foo
            </td></tr>
          </table>
      </td></tr>
    </table>
    Style sheet:
    Code:
    table.outer td { border: 1px solid black; padding: 4px 6px 2px 9px } [Just an example]
    Can you see the problem? The style sheet says that any cell in table "outer" should use that style. The cells of "inner" also going to use that style, but I do not want this.
    djchazza
    Remote Spy Software - PC and Internet Monitoring
    Internet Spy Software - Web Filtering and Usage Reporting

  2. #2
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    HTML Code:
    table.outer td { 
      border: 1px solid black; 
      padding: 4px 6px 2px 9px; 
    }
    
    table.outer td table.inner td { 
      border: none; 
      padding: 0px;
      /* OR whatever you want */ 
    }
    Says, any td within the class inner which is in a td within the class outer, apply this style.

    You can target general elements as specific as you want and no matter how far down their nested.

  3. #3
    SitePoint Enthusiast djchazza's Avatar
    Join Date
    Jan 2004
    Location
    Sydney, Australia
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So the only way is to manually "undo" all the changes done in the parent style? OK. I an accept that. It just don't seem elegant.
    djchazza
    Remote Spy Software - PC and Internet Monitoring
    Internet Spy Software - Web Filtering and Usage Reporting

  4. #4
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's why they call it cascading style sheets. Without a cascading inheritance css wouldn't be very usable for styling whole pages. Getting specific in your rules is where the author gains control and then you realize how powerful css can be.

  5. #5
    SitePoint Enthusiast djchazza's Avatar
    Join Date
    Jan 2004
    Location
    Sydney, Australia
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, just because they decided to call it cascading style sheets, there is no way to prevent it from inheriting. I don't think that just because the name uses the word cascading means that it should be obvious that you cannot prevent inheritence.

    It still seems pretty stupid to me that I must undo all the changes from the parent styles. So, so stupid.
    djchazza
    Remote Spy Software - PC and Internet Monitoring
    Internet Spy Software - Web Filtering and Usage Reporting

  6. #6
    Non-Member emstro's Avatar
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would just like to take this moment to revel in xDev's extensive knowledge of CSS.

    *ahhhhhh*

    That was nice.

  7. #7
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't have to undo anything if you target your styles right. A nested table is most often not even necessary. Show me the exact code that your working on and I might find a different way of doing it.

    Using your example above, something like this maybe:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
    Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Conforming XHTML 1.0 Transitional Template</title>
    <meta http-equiv="Content-Type" content=
      "text/html; charset=iso-8859-1" />
    <style type="text/css">
    div.tableWrap { 
      border: 1px solid black; 
      padding: 4px 6px 2px 9px;
      width: 10em;
    }
    </style>
    </head>
    <body>
    
    <div class="tableWrap">
    Welcome
          <table>
            <tr>
    	<td>Foo</td>
    	<td>Foo2</td>
             </tr>
          </table>
    </div>
    </body>
    </html>
    Last edited by xDev; Feb 6, 2004 at 21:19.

  8. #8
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by emstro
    I would just like to take this moment to revel in xDev's extensive knowledge of CSS.

    *ahhhhhh*

    That was nice.
    Such flattery from one so knowledgeable as yourself ... please stop it I'm going to blush

  9. #9
    SitePoint Enthusiast djchazza's Avatar
    Join Date
    Jan 2004
    Location
    Sydney, Australia
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a quick example.
    The inside table which shows the prices should not have a border and should have the default padding around it (not padding = 16px).

    Remember, the point is not to override the style sheet. Any man and his donkey can do that. I want to see a way where I can apply the style only to the one outer table only and not the inside table too.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
      table.outer { width: 100%; border-collapse: collapse }
      table.outer td { padding: 16px; border: 1px solid #99CCFF; vertical-align: top; } 
    </style>
    </head>
    
    <body>
    <table class="outer">
      <tr>
    	<td><p><b>Prices</b></p>
    	  <table width="100%">
    		<tr>
    		  <td>1</td>
    		  <td>$20</td>
    		</tr>
    		<tr>
    		  <td>5</td>
    		  <td>$50</td>
    		</tr>
    		<tr>
    		  <td>10</td>
    		  <td>$80</td>
    		</tr>
    		<tr>
    		  <td>20</td>
    		  <td>$120</td>
    		</tr>
    		<tr>
    		  <td>50</td>
    		  <td>$150</td>
    		</tr>
    	  </table>
    	  <p><b></b></p></td>
    	<td><p><b>News</b></p>
    	  <p>News goes here.</p></td>
      </tr>
    </table>
    </body>
    </html>
    djchazza
    Remote Spy Software - PC and Internet Monitoring
    Internet Spy Software - Web Filtering and Usage Reporting

  10. #10
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    djchazza,

    First of all, my original post was the only solution if you insist on
    keeping the same markup - "donkey" or no donkey.

    table.outer td {} simply says
    that any td inside table.outer will have these styles - including whether or
    not that td just happens to be inside a nested table. The only way to stop
    the inheritance on the tds is to target table.outer td table td; if
    that's just not "elegant" enough, well that's not my problem.

    Your outer table serves no function, its there for presentational purposes
    only. Its a hack in the strictest sense of the word (as used in the design
    and development community). It distorts the semantics of the markup
    and doesn't correspond to the structure of the data. Get rid of it
    completely and you won't have to worry about cascading effects to
    nested tds.

    CODE:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>Nested Tables Suck! </title>
        <meta http-equiv="Content-Type" content=
        "text/html; charset=iso-8859-1">
    <style type="text/css">
      table.outer { width: 100%; border-collapse: collapse; }
      table.outer td { 
      padding: 16px; border: 1px solid #99CCFF; 
      vertical-align: top; 
    } 
      
    /* new css */
     div#outer { 
      width: 100%;
      border: 1px solid #99CCFF;
      padding: 0px;
      margin-top: 20px;
    }
    
    div#outer table { 
        border-right: 1px solid #99CCFF; 
        padding: 0px;
        margin: 0px;
        width: 53.4%;
    }
    div#outer table td, div#outer table th{
        padding: 6px 0px 6px 32px;
    }
    div#outer table th { text-align: left; }
    
    div#outer .right {
        float: right;
        width: 44%;
        margin: 0px;
        padding: 10px;
    }
    
    </style>
      </head>
    
      <body>
        <table class="outer">
          <tr>
            <td>
              <p><b>Prices</b></p>
    
              <table width="100%">
                <tr>
                  <td>1</td>
                  <td>$20</td>
                </tr>
                <tr>
                  <td>5</td>
                  <td>$50</td>
                </tr>
                <tr>
                  <td>10</td>
                  <td>$80</td>
                </tr>
                <tr>
                  <td>20</td>
                  <td>$120</td>
                </tr>
                <tr>
                  <td>50</td>
                  <td>$150</td>
                </tr>
              </table>
            </td>
            <td>
              <p><b>News</b></p>
    
              <p>News goes here.</p>
            </td>
          </tr>
        </table>
        <!-- new markup -->
    
        <div id="outer">
          <div class="right">
            <h4>News</h4>
    
            <p>News goes here</p>
          </div>
    
          <table>
            <tr>
              <th colspan="2">Prices</th>
            </tr>
            <tr>
              <td>1</td>
              <td>$20</td>
            </tr>
            <tr>
              <td>5</td>
              <td>$50</td>
            </tr>
            <tr>
              <td>10</td>
              <td>$80</td>
            </tr>
            <tr>
              <td>20</td>
              <td>$120</td>
            </tr>
            <tr>
              <td>50</td>
              <td>$150</td>
            </tr>
          </table>
        </div>
      </body>
    </html>
    
    Last edited by xDev; Feb 7, 2004 at 00:13.

  11. #11
    SitePoint Enthusiast djchazza's Avatar
    Join Date
    Jan 2004
    Location
    Sydney, Australia
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the insight. I'll try the div method, but I think that simply overriding the child cells is going to be the easiest way. I was hoping there would be a solution to what I wanted in CSS, but alas I am convinced there is not.
    djchazza
    Remote Spy Software - PC and Internet Monitoring
    Internet Spy Software - Web Filtering and Usage Reporting


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
  •