Question

I am attempting to create a scrolling table with a fixed header. Problem is that the columns between the <thead> and the <tbody> are not matched correctly. My question is how can I get the columns to match in a scrolling table with fixed headers.

Below is the fiddle, just click on the “Add Question” button 3 times and then scroll the table:

http://jsfiddle.net/6rCyH/2/

Below is the html of the table:

<table id="qandatbl" align="center">
<thead class="tblhead">
<tr>
    <th class="qid">Question No</th>
    <th class="question">Question</th>
    <th class="optandans">Option and Answer</th>

</tr>
</thead>
<tbody class="tblbody">
</tbody>
</table>

Below is the main css which controls the table and each column:

body{
    font-size:85%;  
}           

.extratd{
    border:1px black solid;
    border-collapse:collapse;
}

.qid { 
    min-width:3%;
    max-width:3%;
    font-weight:bold;
    border:1px black solid;
    border-collapse:collapse;
}

.question { 
    min-width:14%;
    max-width:14%;
    border:1px black solid;
    border-collapse:collapse;
}

.question textarea {
    min-width:auto;
    max-width:auto;
    resize:none;
    height:100%;
    font-size:100%;
}

.noofanswers{
    min-width:15%;
    max-width:15%;
    padding-top:5%;
    padding-bottom:5%;
}

.optandans{
    min-width:30%;
    max-width:30%;
    border:1px black solid;
    border-collapse:collapse;
}

.option{
    min-width:100%;
    max-width:100%;
    padding-top:5%;
    padding-bottom:5%;
}

.answer { 
    min-width:100%;
    max-width:100%;
    padding-top:5%;
    padding-bottom:5%;
     }   

.tblbody{
    background-color: #ddd;
    height: 400px;
    overflow: auto; 
}

.tblhead, .tblbody {
    display: block;
}

Answer 1

The result

with the following CSS

<style type="text/css">
        .qid {
            width:15%;
        }

        .question {
            width:30%;
        }

        .extratd {
            /*
             * width will be the remaining of its parent.
             */
        }
        table {
            border-collapse:collapse;
        }
        td, th {
            border:1px solid black;
            /*
             * In case the long word will affect the width of TD
             */
            word-wrap:break-word;
            word-break:break-all;
        }
        thead {
            /*
             * minus the scollbar's width from THEAD
             */
            margin-right:12px;
        }
        thead, tbody {
            /*
             * Override the default display table-head-group, table-row-group.
             * If not, the height will be computed with table layout rendering algorithm
             * by browser
             */
            display:block;
        }
        tbody {
            /*
             * let the TABLE BODY part scroll
             */
            height:400px;
            overflow:scroll;
        }
        tbody td {
            /* In case the children in the TD will change its width which 
             * set by CSS implicitly, such as 15%, 30%
             */
            overflow:hidden;
        }
        textarea {
            /* to override the default width of text area in case it will 
             * go out of TD */
            width:100%;
        }
    </style>

See the comments inline. There is a problem for this solution, we have to know the width of scroll bar, so the compatibility won’t be good.

<table>
        <thead>
            <tr>
                <th class="qid">Question No</th>
                <th class="question">Question</th>
                <th class="extratd">Option and Answer</th>
            </tr>
        </thead>
        <tbody>
            <tr align="center" class="optionAndAnswer">
                <td class="qid">1</td>
                <td class="question">                   
                    <textarea class="textAreaQuestion" name="questionText[]" value=""></textarea>
                </td>
                <td class="extratd">
                <div class="option">
                    1. Option Type:
                    <br>
                    <input type="text" readonly="readonly" class="gridTxtRow maxRow" name="gridValues[]" value="">
                    <span class="showGrid" href="#">[Open Grid]</span>
                </div>
                <div class="noofanswers">
                    2. Number of Answers:
                    <br>
                    <span style="display: none;" class="naRow string" name="numberAnswer[]" value="">Only 1 Answer</span>
                    <input type="text" onchange="getButtons()" onkeypress="return isNumberKey(event)" onkeyup="numberKeyUp(this)" style="display: block;" class="numberAnswerTxtRow answertxt" name="numberAnswer[]" value="">
                </div>
                <div class="answer">
                    3. Answer:
                    <br>
                </div>
                </td>
            </tr>
        </tbody>
    </table>