CODEWITHSUNDEEP
htmlcsshtml-tablecells
user8494074
user8494074

Reputation:

Give on different cells colors

How can I have different colors on each cell. What I did is only to make the whole red, just to the first 3 cells only yellow blue and red. How can it be this? I should refer to specific <td>? I see this question, but it wasn't exactly what I was searching. 

body {
  background: #000;
}

#wrap {
  margin: 0 auto;
  /* margin 0 auto will center that box in your document */
  width: 780px;
  /*size of your box*/
  background: #000;
  text-align: center;
  /* everything will be written in that box will be centered horizontaly*/
}

td:hover {
  background-color: #ff0000;
  color: #000000;
}
<div id="wrap">
  <table width="780">
    <tr>
      <td align="center">
        <table border=1>
          <tbody>
            <!-- Results table headers -->
            <tr>
              <th>Messages Per Month</th>
              <th>1 Month Pricing</th>
              <th>3 Month Pricing</th>
              <th>12 Month Pricing</th>
            </tr>
            <tr>
              <td>500</td>
              <td>$14.95/Month</td>
              <td>$12.95/Month</td>
              <td>$9.95/Month</td>
            </tr>
            <tr>
              <td>1,000</td>
              <td>$24.95/Month</td>
              <td>$20.95/Month</td>
              <td>$17.95/Month</td>
            </tr>
            <tr>
              <td>1,500</td>
              <td>$37.95/Month</td>
              <td>$31.95/Month</td>
              <td>$26.95/Month</td>
            </tr>
            <tr>
              <td>2,000</td>
              <td>$49.95/Month</td>
              <td>$41.95/Month</td>
              <td>$35.95/Month</td>
            </tr>
            <tr>
              <td>2,500</td>
              <td>$62.95/Month</td>
              <td>$52.95/Month</td>
              <td>$44.95/Month</td>
            </tr>
            <tr>
              <td>5,000</td>
              <td>$119.95/Month</td>
              <td>Not Available</td>
              <td>Not Available</td>
            </tr>
            <tr>
              <td>7,500</td>
              <td>$179.95/Month</td>
              <td>Not Available</td>
              <td>Not Available</td>
            </tr>
            <tr>
              <td>10,000</td>
              <td>$219.95/Month</td>
              <td>Not Available</td>
              <td>Not Available</td>
            </tr>
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </table>
</div>

Upvotes: 0

Views: 89

Answers (3)

Richard Ramos
Richard Ramos

Reputation: 59

First let's create a simplify version of your table.

        table tr td{
            border:2px solid black;
            width:70px;height:30px;
            text-align: center;
        }
        table{
            border-collapse: collapse;
        }

        table:hover tr td:nth-child(1){
            background: yellow;
        }

        table:hover tr td:nth-child(2){
            background:blue;
        }
        table:hover tr td:nth-child(3){
            background:red;
        }
    <table>
        <tr>
            <td>one</td>
            <td>two</td>
            <td>three</td>
            <td>four</td>

        </tr>

        <tr>
            <td>five</td>
            <td>six</td>
            <td>seven</td>
            <td>eight</td>
        </tr>

        <tr>
            <td>nine</td>
            <td>ten</td>
            <td>eleven</td>
            <td>twelve</td>
        </tr>
    </table>

Let me give you a bit of an explanation.. the table:hover tr td:nth-child(1) part, first the table:hover part, when we hover to the whole table, we want to target all the tr, inside the table, then inside the tr, we want to only select the first td ":nth-child(1)" of every tr, so this will only select and change the background color of the one,five and nine td (which is the first column of the table) color to yellow if we hover the mouse to the whole body of the table.

PS: For me, I prepare to do this on JavaScript.

Upvotes: 0

londongrammar
londongrammar

Reputation: 163

Try using nth-child on the elements, here is a quick reference to all kinds of selections.

td:nth-child(odd) {
  color: green;
}

td:nth-child(even) {
  color: red;
}

td {
  border: 1px solid gray;
}
<table>
  <tr>
    <td>2,500</td>
    <td>$62.95/Month</td>
    <td>$41.95/Month</td>
    <td>$35.95/Month</td>
  </tr>
  <tr>
    <td>1,500</td>
    <td>$52.95/Month</td>
    <td>$31.95/Month</td>
    <td>$25.95/Month</td>
  </tr>
</table>

Upvotes: 1

dave
dave

Reputation: 64725

You can use nth-child css psuedoselectors:

    td:nth-child(1) {
        color: yellow;
        background-color: #AAA;
    }
    td:nth-child(2) {
        color: red;
    }
    td:nth-child(3) {
        color: blue;
    }
<table>
<tr>
<td>Yellow</td>
<td>Red</td>
<td>Blue</td>
<td>Normal</td>
</tr>
</table>

Upvotes: 0

Related Questions