www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Apply styling to only one table

  1. #1
    Join Date
    Mar 2014
    Location
    Corpus Christi, TX
    Posts
    88

    resolved [RESOLVED] Apply styling to only one table

    Howdy folks,

    I'm not familiar with CSS, and need some direction. My page has two tables on it. I need to apply styling to only one table, named "data" It seems I can apply styling to either both tables, or none at all. I would appreciate some input as to where I'm going wrong.

    CSS:

    Code:
    <style type="text/css">
            table.data td{
           {
                width: 100%;
            }
            .container {text-align: center;}
            thead {
                background-color: black;
                color: white;
                text-indent: 14px;
                text-align: left;
            }
            tbody tr:nth-child(odd) {
                background-color: rgba(51, 204, 255, 0.6); /* green, 10% alpha */
            }
            tbody tr:nth-child(even) {
                background-color: rgba(51, 255, 102, 0.3); /* red, 30% alpha */
            }
        </style>
    My two tables:

    Code:
    <table width="500" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF" class="nav">
      <tr>
        <td><form action="internetspeeds.php" method="post" name="form1" target="_blank" id="form1"><input type="submit" style="background-color:#00CC00;color:#000000" name="AllInet" id="AllInet" value="All Internet Speeds" />
           </form></td>
        <td><form action="BridgeSpeeds.php" method="post" name="form2" target="_blank" id="form2"><input type="submit" style="background-color:#00CC00;color:#000000" name="BridgeSpeeds" id="BridgeSpeeds" value="All Bridge Speeds" />
           </form> </td>
        <td><form action="IssueSummary.php" method="post" name="form3" target="_blank" id="form3"><input type="submit" style="background-color:#FFFF00;color:#000000" name="IssueSummary" id="IssueSummary" value="Issue Summary" />
           </form></td>
        <td><form action="OpenIssues.php" method="post" name="form4" target="_blank" id="form4"><input type="submit" style="background-color:#FF0000;color:#FFFFFF" name="OpenIssues" id="OpenIssues" value="Open Issues" />
           </form></td>
       
      </tr></table>
    </table>
    <table class="data">
    <tr>
    <div align="center"></div><div align="center"></div><td>
      <strong>ReportID</strong></td>
    <td><strong>
    Timestamp</strong></td>
    <td><strong>
    ComputerName</strong></td>
    <td><strong>
    ExpectedRig</strong></td>
    <td><strong>
    MAC</strong></td>
    <td><strong>
    DeviceName</strong></td>
    <td><strong>
    SignalNoiseDBM</strong></td>
    <td><strong>
    Distance</strong></td>
    <td><strong>
    TxRxMbps</strong></td>
    <td><strong>
    CCQ</strong></td>
    <td><strong>
    ConnectionTime</strong></td>
    <td><strong>
    LastIP</strong></td>
    <strong>
    </tr>

  2. #2
    Join Date
    Dec 2012
    Posts
    54
    use .data as your selector and all subsequent calls to its children IE
    Code:
    .data td{
    ....... ..
    ........
    }
    
    .data tr{
    }
    if you just delete the word table from your first selector and then add .data then a space before your other selectors you will get your desired goal.

  3. #3
    Join Date
    Mar 2014
    Location
    Corpus Christi, TX
    Posts
    88
    Forgive me for being such a novice, but what do you mean by other "selectors". I have attached what I think you mean by your answer. Please advise.
    Code:
    <style type="text/css">
            .data td{
           {
                width: 100%;
            }
            .container {text-align: center;}
            thead {
                background-color: black;
                color: white;
                text-indent: 14px;
                text-align: left;
            }
    		.data tr{
            tbody tr:nth-child(odd) {
                background-color: rgba(51, 204, 255, 0.6); /* green, 10% alpha */
            }
            tbody tr:nth-child(even) {
                background-color: rgba(51, 255, 102, 0.3); /* red, 30% alpha */
            }
        </style>
    I am not getting any formatting for this table using the above. Where am I going wrong?

  4. #4
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,031
    So in CSS, the way you reference a particular element or set of elements to which a styling rule will apply is called a selector. For example 'div' as a selector will reference and apply the styling to all <div> elements on a page. You cannot 'nest' styling rules (with the few exceptions for things like media queries) inside of multiple selectors.

    Your code actually contains too many opening brackets which makes the CSS invalid. As a general rule of thumb you should always have one selector (or set of selectors, which can be separated by a comma), an opening bracket ({), your CSS styling rules (such as colors, font properties, etc.) and then a closing bracket (}).

    Code:
    <style type="text/css">
    	table.data td { width: 100%; }
    	.container { text-align: center; }
    	table.data thead {
    		background-color: black;
    		color: white;
    		text-indent: 14px;
    		text-align: left;
    	}
    	table.data tbody tr { background-color: rgba(51, 255, 102, 0.3); }
    	table.data tbody tr:nth-child(odd) { background-color: rgba(51, 204, 255, 0.6); }
    </style>
    You'd end up with something like this. You technically don't need the 'table' prepended to the .data class in the selectors, as Lesshardtoofind was mentioning. I tend to leave things like that on to avoid potential conflicts as it makes the selector more specific (eg. if you use the data class on other elements the CSS above wouldn't apply to them). For your specific example here it doesn't make as much sense, but it's a good practice to get into when you start dealing with more complex CSS scenarios.

  5. #5
    Join Date
    Dec 2012
    Posts
    54
    well I assumed you wanted those other things to apply to only the data table so make them look like your first selector.

    BTW selector is a CSS term.. css works like
    SELECTOR{ NAME: VALUE;}

    Selector name value pairs.... so when you want to select something nested inside something else you must put it to the right of the parent.
    So your second selector could be like
    Code:
    .data tbody tr:nth-child(odd) {
      background-color: rgba(51, 204, 255, 0.6); /* green, 10% alpha */
    }
    change your code like that also VERY important any opening { should have a closing }
    you have 7 opening and 5 closing right now.

  6. #6
    Join Date
    Mar 2014
    Location
    Corpus Christi, TX
    Posts
    88
    Thank you both for looking at this. I was able to get this looking the way I wanted. I'm going to do a little reading on CSS. Thank you again.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles