Clever Geek Handbook

Traverse inside a table cell

I need to add progress to the background of a table cell. Here's a fiddle: http://jsfiddle.net/kedctfmj/3/

HTML:

<table>
    <tr>
        <td>value1</td>
        <td>
            value2
            <div class="bg" style="width: 20%"/>
        </td>
        <td>value3</td>
    </tr>
    <tr>
        <td>value4</td>
        <td>
            value5
            <div class="bg" style="width: 30%"/>
        </td>
        <td>value6</td>
    </tr>
</table>

CSS

table {
    width: 300px;
}
tr:nth-child(odd) {
    background-color: #f8f8f8;
}
td {
    border: 1px solid #ccc;
}

td {
    position: relative;
}

.bg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #8ef;
    z-index: -1;
}

The closest thing I could achieve was with z-index: -1. But that doesn't work very well with tr background color.

+3


source to share


2 answers


Add very little transparency to the elements tr

(so tr

a new stacking context is created for the elements ) and then z-index: -1

it works as expected:

tr:nth-child(odd) {
    background-color: #f8f8f8;
    opacity: .999;
}
.bg {
    /* ... */
    z-index: -1;
}

Demo: http://jsfiddle.net/kedctfmj/5/



Another issue that can potentially cause problems in IE is self-closing tags <div />

. This is invalid syntax, it must have closing tags </div>

:

<div class="bg" style="width: 20%"></div>
+3


source


Have you considered changing the opacity of the .bg element so that the value is still displayed?

Using the code from your fiddle:

.bg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #8ef;
    opacity: 0.5;
    /*z-index: -1;*/ }


Hope it helps ...

- Lance

+1


source






More articles:


All Articles