Question

I want to make a table which isn’t editable under certain conditions, so I want to overlay it with a div.

Why is this not working?

CSS

<style type="text/css">
    #div_tabel_basisgegevens {
        background-color: red;
        float:left;
        position:relative;
        left:0px;
        top:0px;
        z-index:120;
        width:750;
        height:100px;
    }   
    #tabel_basisgegevens {
        height:100px;
        color:white;
        position:relative;
        left:0px;
        top:0px;
        z-index:2;
    }   
</style>

HTML

<div id="div_tabel_basisgegevens">
    <table id="tabel_basisgegevens">
        <tr>
            <td>
                <input type="Checkbox" id="geen_periodes" />
            </td>
        </tr>
    </table>
</div>

Answer 1

Wrap the div and table with another div. Give the parent div position:relative;. Give the overlay div opacity:0;position:absolute;width:100%;height:100%;

<style type="text/css">
#div_tabel_basisgegevens{
    background-color: red;
    float:left;
    position:absolute;
    left:0px;
    top:0px;
    z-index:120;
    width:100%;
    height:100%;
    opacity:0;
}    
#tabel_basisgegevens{
    height:100px;
    color:white;
    left:0px;
    top:0px;
    z-index:2;
    background:red;
}    
    #wrapper {position:relative;}
</style>
    <div id="wrapper">
        <div id="div_tabel_basisgegevens"></div>
        <table id="tabel_basisgegevens">
            <tr><td><input type="Checkbox" id="geen_periodes"></td></tr>
        </table>
    </div>

http://jsfiddle.net/RZQwb/2/

And as Nerd-Herd mentioned, if all you want to do is make an input field non-editable, the correct method is to add the disabled attribute ( disabled="disabled" for XHTML)