CSS3 Table Background

by steveukx

HTML

<div />
<form>
    <input type="number" id="width1" value="50">
    <input type="number" id="width2" value="50">
    <input type="number" id="width3" value="50">
</form>

CSS

html, body, div { height: 100%; width: 100%; padding: 0; margin: 0; }
body {
background-color: white;
background-image: -webkit-linear-gradient(top, #fff 50%, #eef2f5 50%);
background-size:36px 36px;
}
div {
position: absolute;
background: -webkit-linear-gradient(right, #9AB0BE 1px, transparent 1px),
            -webkit-linear-gradient(right, #9AB0BE 1px, transparent 1px),
            -webkit-linear-gradient(right, #9AB0BE 1px, transparent 1px);
background-repeat: repeat-y;
}
input {
    width: 50px; border: none; background: transparent;
}

JavaScript

function onInputChange() {
    var w = 0,
        css = [];
    $(':input').each(function(index, element) {
        w += (+this.value) + index;
        css.push(w + 'px 10px');
        $(this).css('width', this.value);
    });
    $('div').css({
        backgroundSize: css.join(', ')
    });
}
$(':input').on('change', onInputChange);
onInputChange();