SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    differnet table styilng on same page?

    hi,
    i need to use slightly different CSS for tables throughout my site.
    if I just add the css to the elements it affect the whole site layout.

    how can I do something like:


    Code:
    <div class="products-table">
    <tr>
                                             <td>blah blah</td>
                                             <td>blah blah</td>
                                           </tr> 
    </div>
    <div class="customer-table">
    <tr>
                                             <td>blah blah</td>
                                             <td>blah blah</td>
                                           </tr> 
    </div>
    and have each table with it's own style?

    hope that make sense

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello give each table a different class or ID and target those classes/IDs from the css.

    HTML Code:
    <table class="table1">
    ...
    </table>
    Code:
    table.table1 {
    property:value;
    ...
    }
    Hope it helps.

  3. #3
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your markup is slightly wrong, your table-rows (the tr tags) are not nested in a table tag but in a div tag, so instead of your code use the following:
    HTML Code:
    <table class="products-table">
    <tr>
    <td>blah blah</td>
    <td>blah blah</td>
    </tr> 
    </table>
    <table class="customer-table">
    <tr>
    <td>blah blah</td>
    <td>blah blah</td>
    </tr> 
    </table>
    From there on follow Johnny's advice
    Dan G
    Marketing Strategist & Consultant

  4. #4
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the replies

    so the css will be like this?

    Code:
    .tableA table {
    property:value;
    ...
    }
    .tableA thead th{
    property:value;
    ...
    }
    .tableA tbody td{
    property:value;
    ...
    }
    and

    Code:
    .tableB table {
    property:value;
    ...
    }
    .tableB thead th{
    property:value;
    ...
    }
    .tableB tbody td{
    property:value;
    ...
    }

  5. #5
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this really depends on your html code, without seeing that we can't tell.

    Your new css code assumes that your table resides in (probably) a div with the class tableA / tableB. Whereas when your table gets the class assigned, then your css will only partly work (the tbody and tbody td part but not the table part itself since in this case the table needs to be a child of the element with the class tableA/B). If you assign the class to your table you should follow Johnny's example up there.
    Dan G
    Marketing Strategist & Consultant

  6. #6
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks guys for the replies, sorry to confuse you. let me try explain myself better;

    I have a page with tables and whenever I style them it messes the original page layput as well.

    I understand that I need to create a class for each table but whenever I write the CSS as in Johnny's example it doesn't seem to work.

    the following didn't work:
    Code:
    table.specs  {
    	font-family: Tahoma, Verdana, Arial,sans-serif ;
    	border-collapse: collapse;
    	border-spacing: 1px;
    	border-left: 1px solid #1F2A34;
    	border-right: 1px solid #1F2A34;
    }
    thead.specs  th{
    	font-size: 14px;
    	color: #fff;
    	height: 30px;
    	text-align: center;
    	border-top: 5px solid black;
    	border-bottom: 5px solid black;
    	border-left: 1px solid #1F2A34;
    	border-right: 1px solid #1F2A34;
    }
    tbody.specs  td{
    	font-size: 10px;
    	background: #2d3134;
    	color: #fff;
    	border: 1px solid #373B3E;
    	padding-left: 3px;
    	height: 40px;
    }
    tbody.specs  td a:link{
    	font-size: 12px;
    	color:#FF6600;
    	font-weight: bold;
    	text-decoration: none;
    }
    but this one did

    Code:
    .specs table {
    	font-family: Tahoma, Verdana, Arial,sans-serif ;
    	border-collapse: collapse;
    	border-spacing: 1px;
    	border-left: 1px solid #1F2A34;
    	border-right: 1px solid #1F2A34;
    }
    .specs thead th{
    	font-size: 14px;
    	color: #fff;
    	height: 30px;
    	text-align: center;
    	border-top: 5px solid black;
    	border-bottom: 5px solid black;
    	border-left: 1px solid #1F2A34;
    	border-right: 1px solid #1F2A34;
    }
    .specs tbody td{
    	font-size: 10px;
    	background: #2d3134;
    	color: #fff;
    	border: 1px solid #373B3E;
    	padding-left: 3px;
    	height: 40px;
    }
    .specs tbody td a:link{
    	font-size: 12px;
    	color:#FF6600;
    	font-weight: bold;
    	text-decoration: none;
    }
    and my HTML
    Code:
    <table class="specs">
    I could have been happy with the fact that example two is working but I'm not sure if that's the way it should be done, and also if I try to add additional styling for another table using the same syntax of the 2nd example then the page is breaking again...

    can someone see what i'm doing wrong?

  7. #7
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In your first example:

    Code:
    tbody.specs
    isn't correct as it's not tbody with the class specs but table, so
    Code:
    table.specs
    is right but it should've been
    Code:
    .specs tbody
    .specs thead
    I don't know why your second example works, as table isn't a child of an element with the class specs, or is it?

    If you can, would it be possible to see an online test version?
    Dan G
    Marketing Strategist & Consultant


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
  •