CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2045025
user2045025

Reputation:

change color for second column

I have a jQuery responsive table.
When you reduce the browser window you can see a different lay out.

I want to change the color of second column values of each table but I don't know how to give ids for second column values and change its color.

Providing a fiddle and also my code below:

#page-wrap {
    margin: 50px;
}
/* 
        Generic Styling, for Desktops/Laptops 
        */
 table {
    width: 100%;
    border-collapse: collapse;
}
/* Zebra striping */
 tr:nth-of-type(odd) {
    background: #eee;
}
th {
    background: #1a4567;
    color: white;
    font-weight: bold;
}
td, th {
    padding: 6px;
    border: 1px solid #ccc;
    text-align: left;
}
/* 
        Max width before this PARTICULAR table gets nasty
        This query will take effect for any screen smaller than 760px
        and also iPads specifically.
        */
 @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    tr {
        border: 1px solid #ccc;
    }
    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }
    td:before {
        /* Now like a table header */
        position: static;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }
    /*
            Label the data
            */
    td:nth-of-type(1):before {
        content:"BOM Id";
    }
    td:nth-of-type(2):before {
        content:"Brand Name";
    }
    td:nth-of-type(3):before {
        content:"BOM Type";
    }
    td:nth-of-type(4):before {
        content:"BOM Description";
    }
    td:nth-of-type(5):before {
        content:"Edit";
    }
    td:nth-of-type(6):before {
        content:"Related";
    }
    td:nth-of-type(7):before {
        content:"Print";
    }
    td:nth-of-type(8):before {
        content:"ECO";
    }
    td:nth-of-type(9):before {
        content:"Dev";
    }
    td:nth-of-type(10):before {
        content:"Files";
    }
}
/* Smartphones (portrait and landscape) ----------- */
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    body {
        padding: 0;
        margin: 0;
        width: 320px;
    }
}
/* iPads (portrait and landscape) ----------- */
 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    body {
        width: 495px;
    }
}

Upvotes: 4

Views: 2682

Answers (3)

Kad
Kad

Reputation: 658

Here's a proper JSFiddle for your request. I've cleaned it up and added two rows in the CSS.

You mentionned you didn't know how to give ID's to second columns for smaller resolution devices. For your example, the selector for the first column is td:before and for the second column is td. More specifically the following CSS seems to accomplish what you were looking for :

@media only screen and (max-width: 760px) {
   td {
      color:orange;
   }

   td:before {
      color:darkblue; 
   }
}

From your responsive transformations, your first column is actually from the content CSS attribute on td:before and not the th markup anymore. This is wrong from a semantic point of view, but I'm guessing you have restrictions forcing this behaviour.

Upvotes: 0

jacksonfiverniner
jacksonfiverniner

Reputation: 92

For only the 2nd colum of every table you can

td:nth-child(2),th:nth-child(2){}

or

td:first-child+td,th:first-child+th{}

to make sure if works in early IE

Upvotes: 1

Nope
Nope

Reputation: 22339

If you only want to color the second column you can use something similar to:

td:nth-child(2) {
    background: #CCC
}

DEMO - Change color of second column

If you also want to include the header itself you can add the same to the th, similar to:

th:nth-child(2) {
    background: teal
}

DEMO - Change color of Second Column Header too

If you want to color every second column and not just the second column you can use odd and even similar to this:

th:nth-child(even) {
    background: teal;
}

td:nth-child(even) {
    background: #CCC;
}

DEMO - Apply colors to every second column

Upvotes: 2

Related Questions