Styling

Here’s the css that I use on the grridjs.org website, for the demo.

#outerDiv {
    width: 890px; /* includes 15 for the scrollbars*/
    height: 295px; /* includes 15 for the scrollbars*/
    border: 1px solid black;
    position: relative;
    overflow: scroll; /* set this to hidden if don't want scrollbars */
    z-index:50;
}
#innerDiv {
    position: relative;
    left: 0px;
    top: 0px;
    z-index:1;
}

#outerRowIndicatorsDiv {
    border: 1px solid silver;
    height: 280px;
    width: 40px;
    margin-left:0px;
    position: relative;
    overflow: hidden;
    float:left;
    background-color:#EEEEEE
}
#innerRowIndicatorsDiv {
    position:relative;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 900px;
}
#outerColumnIndicatorsDiv {
    border: 1px solid silver;
    height: 20px;
    width: 875px;
    margin-top:20px;
    margin-left:0;
    position: relative;
    overflow: hidden;
    background-color:#EEEEEE
}
#innerColumnIndicatorsDiv {
    position: relative;
    left: 0px;
    top: 0px;
    width:2600px;
    height:100%;
}
.columnIndicator {
    z-index:4;
    cursor: pointer;
    height:100%;
    text-align:center;
    background-color:#EEEEEE;
}
div.columnIndicator:hover {background-color: white}

.rowIndicator {
    width:100%;
    text-align:center;
    cursor: pointer;
    background-color:#EEEEEE;
}
div.rowIndicator:hover {background-color: white}

input.grid-cell-input {
    font-size: 10px;
    border: none;
    font-family:verdana;
    padding:0;
    background-color: white;
    z-index:99;
}
input.header-row-cell {
    background-color: #FFFACD;
    font-weight: bold;
}
div.grid-cell {
    position:absolute;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    z-index:3;
}
#gridProgress {
    display:block;
    position:absolute;
    border: 2px solid silver;
    background-color: #EEEEEE;
    top:285px;
    left:400px;
    height:40px;
    width: 200px;
    z-index:1000;
    font-family: verdana;
    font-size: 13px;
    text-align:center;
}