如何匹配滚动表中具有固定标题的列

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

Remove this part from the end of your CSS:

.tblhead, .tblbody {
    display: block;
}

Example: http://jsfiddle.net/grc4/DC4Ps/1/

Answer 2

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>

Answer 3

Did you try: question textarea { min-width: auto; max-width: auto; resize: none; height: 240px; font-size: 100%; border: none;

Answer 4

Why are you using percentages? If you use px everything should be fixed. http://jsfiddle.net/6rCyH/5/

            /*css for QandATable.php*/
body{
    font-size:85%;    
}            

#qandatbl{
    border:1px black solid;
    border-collapse:collapse;
}

#qandatbl td { 
    vertical-align: middle;
}

#qandatbl th{
    border:1px black solid;
    border-collapse:collapse;
    text-align:center;
}

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

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

.question { 
    min-width:177px;
    max-width:177px;
    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:194px;
    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%;
     }


.wrapper{
    text-align:left;
    display: inline-block;
}

#question{
    display:inline-block;
    vertical-align:top;    
    min-width:25%;
    max-width:25%;
}

#question th{
    border-collapse:collapse;
    border:1px solid black;    
    position: fixed;
}

#question td{
    border-collapse:collapse;
    border:1px solid black;    
}

#optionAndAnswer{
    display:inline-block;
    vertical-align:top;
    min-width:28%;
    max-width:28%;
}

#optionAndAnswer th{
    border-collapse:collapse;
    border:1px solid black;    
}

#optionAndAnswer td{
    border-collapse:collapse;
    border:1px solid black;    
}

#optionAndAnswer td table td {
    border: 0px;   
}

#answerSection{
    width:100%;
    text-align:center;    
}


#detailsBlock{    
    text-align:center;
}

.numberAnswerTxt{
    background-color: #F2F2F2;
    float:left;
    width:15%;
    font-weight:bold;
    display:none;
    font-size:85%;    
}

.numberAnswerTxtRow{
    background-color: #F2F2F2;
    float:center;
    width:15%;
    font-weight:bold;
    display:none;
    margin:auto;
    font-size:85%;    
}


.answerBtns{
    background-color: #ffffff;
    border: #666666 1px solid;
    color: black;
    font-weight:bold;
    display:none;
    cursor:pointer;
    font-size:85%;    
    }


#addQuestionBtn{
    font-weight:bold;
    height:30px;
    width:150px;    
    cursor:pointer;
    font-size:85%;
}

.questionTextArea{
    width:98%;
    resize:none;
    font-size:100%;
}

.showGrid{
    color:blue;
    text-decoration:underline;    
    cursor:pointer;
    padding-left:2px;
}

.optionTypeTbl{
    display:none;    
    background-color:white;
    position:absolute;  
    border:1px solid black;
    text-align:center;
}

.gridTxt{
    background-color: #F2F2F2;
    border-color: #ddd;
    float:left;
    font-weight:bold;
    width:50%;
    font-size:85%;
}    

.gridTxtRow{
    background-color: #F2F2F2;
    border-color: #ddd;
    float:center;
    font-weight:bold;
    width:50%;
    font-size:85%;
}    

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


.tblhead, .tblbody {
    display: block;
}

​