SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry table styling issue

    I have multiple tables. I want text alignment of first to be on left, rest that follow to be centered. Not sure what I'm missing. Any help appreciated.

    My html:

    Code:
    <table class="fullprice">
      <caption>
        Session Rates
      </caption>
      <colgroup>
      <col id="length">
      <col id="rate">
      </colgroup>
      
      <tr>
        <th scope="col">Length</th>
        <th scope="col">Rate</th>
      </tr>
      <tr>
        <td><sup>1</sup>/<sub>2</sub> hour</td>
        <td>$40</td>
      </tr>
      <tr>
        <td>1 hour</td>
        <td>$70</td>
      </tr>
      <tr>
        <td>1 <sup>1</sup>/<sub>2</sub> hour</td>
        <td>$105</td>
      </tr>
      <tr>
        <td>2 hour</td>
        <td>$130</td>
      </tr>
      <tr>
      	<td>1 <sup>1</sup>/<sub>4</sub> hour Hot Stones</td>
        <td>$90</td>
    </table>
    <table class="packages">
    	<caption>
    		1 hour packages
        </caption>
        <colgroup>
        <col id= "quantity">
        <col id= "rate">
        <col id= "no_discount">
        <col id="save">
        <col id= "each">
        </colgroup>
        
        <tr>
        	<th scope= "col">Quantity</th>
            <th scope= "col">Rate</th>
            <th scope= "col">Without Discount</th>
            <th scope= "col">Saves</th>
            <th scope="col">Cost Each</th>
        </tr>
        <tr>
        	<td>3</td>
            <td>$180</td>
            <td>$210</td>
            <td>$30</td>
            <td>$60</td>
        </tr>
        <tr>
        	<td>5</td>
            <td>$275</td>
            <td>$350</td>
            <td>$75</td>
            <td>$55</td>
        </tr>
            <tr>
        	<td>10</td>
            <td>$520</td>
            <td>$700</td>
            <td>$180</td>
            <td>$52</td>
        </tr>    
        </table>
    And CSS:

    Code:
    table {
    	width:65%;
    	margin: 0 auto;
    	padding-top: 5em;
    	border-collapse: collapse;
    	margin-top: 5em;
    }
    
    
    th {
    	padding: .6em 1em .3em;
    	text-align: center;
    	border-bottom: 1px solid black;
    }
    th, td {
    	vertical-align: middle;	
    }
    td {
    	padding: .4em 1em;
    	border-bottom: 1px solid #900;
    }
    tr:hover {
    	color: #005BAA;
    }
    table.fullprice {
    	width: 35%;
    }
    td.fullprice {
    	text-align: left;
    }
    td.packages {
    	text-align: center;
    }
    What am I missing??

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    The following change to your css will center the text in table.packages.

    from:
    Code:
    td.fullprice {
    	text-align: left;
    }
    td.packages {
    	text-align: center;
    }
    to:
    Code:
    .fullprice td {
    	text-align: left;
    }
    .packages td {
    	text-align: center;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that did it. But any explanation of why? What is difference between td.packages and .packages td ? Is it a matter of syntax? Or specificity? Thoughts that might help me in the future??

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Let's look at your HTML and we see
    <table class="fullprice"> and later <table class="packages">

    The tables have been given the classes "fullprice" and "packages".

    The <td> tags within these tables do not have classes assigned.

    .fullprice td {} targets the td tag within the selector whose class is .fullprice.

    td.fullprice {} targets a td tag with a class of .fullprice (which does not exist in your HTML).

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. It's a matter of me understanding the selectors. Thanks so much to you and everyone that helps me in my journey through web design learning.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    You are very welcome. Enjoy the journey


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
  •