Question 246407 in CSS Question posted in
Some basic documentation can be found here.

css with alternate row colours, hover and reveal

I have a table of six columns. The table is formatted with odd and even row colours with current row highlighted with different colour. I am using this table to list pdf documents which can be viewed depending on which row is clicked. All this works smoothly.

The problem I have is that I really don’t want to have to tell users to double click a row. The idea is that every row has one cell (the 4th column as it happens) containing the text ‘View’. What I want to do is to hide this text by setting it to the same colour of the (alternating) background colour and bringing in line with the other cells in the row when hovering on that row. My current css code is:

.tableid .row-hover tr:hover td {
    background-color: #b3f0ff;
    color: #000000;
}

.tableid .odd td {
    background-color: #DFF2FE;
    color: #000000;
}

.tableid .even td {
    background-color: #F2FAFF;
    color: #000000;
}

.tableid .selected tr {
    background-color: #FF0000;
    color: #FFFFFF;
}

Have tried multiple variations of cell selection including child selectors but so far have fallen at every hurdle. Don’t know if I’m missing something fundamental or simple so apologies if I have missed the obvious.

ps: Don’t know if this is relevant but the table is in the WordPress environment.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks Lars for your answer. It wasn't quite what I was wanting but your idea solved my problem. To help others - I resolved my problem by replacing the following code in your example with:

         .tableid .row-hover tr:hover td:nth-child(4) {
     color: transparent;
     }

    with:

         .tableid tr td:nth-child(4) {
     color: transparent;
     }

    This code highlights the 'award' when the row is selected by hover.


  2. 0

    Your goal is a bit vague, though from what I understood is that you’re trying to make the text invisible. You’ve figured setting the text to be the same as the background color could achieve that.

    I would sugest to set the background color to transparent instead. It seems easier to do, you would not have to worry about the ‘even/odd’ color scheme.

    /* New css rules */
/* Instead of making the text the same colour, 
   set it to transparent 
   The 4-th cell contains the 'view' text, we're selecting that one with the 
   ':nth-child' selector
*/
.tableid .row-hover tr:hover td:nth-child(4) {
  color: transparent;
}

/* Make clear to the user this can be clicked by changing the mouse to pointer */
.tableid .row-hover tr {
  cursor: pointer;
}

/* Your existing css */

.tableid .row-hover tr:hover td {
  background-color: #b3f0ff;
  color: #000000;
}

.tableid .odd td {
  background-color: #DFF2FE;
  color: #000000;
}

.tableid .even td {
  background-color: #F2FAFF;
  color: #000000;
}

.tableid .selected tr {
  background-color: #FF0000;
  color: #FFFFFF;
}
    <table class="tableid">
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody class="row-hover">
    <tr class="odd">
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>view</td>
    </tr>
    <tr class="even">
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
      <td>view</td>
    </tr>
    <tr class="odd">
      <td>Ericworks</td>
      <td>Eric everhead</td>
      <td>Botswana</td>
      <td>view</td>
    </tr>
    <tr class="even">
      <td>Slingshot productions</td>
      <td>George Garbanzo</td>
      <td>Sweden</td>
      <td>view</td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search