Mouse over table record issue, HTML CSS, PHP

[robin01]

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}

[Erik_J]

@robin01

This is part of the table script:

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.

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

[SamA74]

@robin01

coded at the table level or inline coded which prevents the record index from getting highlighted when you move the mouse over.

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.

[PaulOB]

@robin01

tr:hover {background-color: #e9e9e9}

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.

[Erik_J]

@PaulOB

background-color: #e9e9e9 !important;

It would also work with “inherit”.

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