Mouse over table record issue, HTML CSS, PHP

Hello everybody,

Issue, table mouse over issue.

I have a database of users, priority and color code that reflects the priority.
I’m trying change the first column/Cell record background color to reflect color stored in the database.
the css/javascript takes care of the table record highlight and this works fine. but to change the first cell background color I use PHP script as the color codes are coming from the database and coded at the table level or inline coded which prevents the record index from getting highlighted when you move the mouse over.

As you can see from the pictures, mouse over Jills record the the whole record is highlighted but when you mouse over Dans record, the mouse over doesn’t quite cover the index. i know its because i have the color codes imbedded within the table.

Any help you can provide would be greatly appreciated.

This is part of the table script:

<tbody id="mainTbody">

                <?php 
                    foreach($returs as $val) {
                        echo '<tr >
                                <td style = "background-color:'.$val["t2_color"].';">'.$val["t2_index"].'</td>
                                <td>'.$val["t2_name"].'</td>
                                <td>'.$val["t2_priority"].'</td>
                                <td>'.$val["t2_color"].'</td>
                            </tr>';
                    } ?>
                </tbody>

CSS

.wraperTable {
    margin: 0 auto;
    width: 600px;
    overflow: auto;
}

table.tblIncidentList {
    margin:0 auto;
    width:95%;
    overflow:auto;
    font-family: helvetica,arial,sans-serif;
    font-size:14px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
    text-align: center;
} 
table.tblIncidentList th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #F6B4A5;
}
table.tblIncidentList td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
}
tr:hover {background-color: #e9e9e9}

cell1 cell2

Hi,
This is not a PHP issue, so it would be helpful if also you posted the generated html code result, i.e. the table. :slight_smile:

(Copy the source from the browser. Ctr+U)

In-line styles can be hard to override, just one reason to avoid them if you can.
Instead of having a style attribute, maybe try having a class instead, and have PHP put in the appropriate class name.
Then if it is CSS setting the background, more CSS can override it more easily when you want it to change.

1 Like

The tr:hover only changes the background of the tr but the cell has a background which sits on top of the tr. i.e.

You would need to do this:

table.tblIncidentList tr:hover td,
table.tblIncidentList tr:hover th {
  background-color: #e9e9e9 !important;
}

!important is needed to over-ride the inline style.

1 Like

It would also work with “inherit”. :stuck_out_tongue:

I was the first to look at the issue, but the solution eluded me. :blush:

1 Like