javascript - 如何将滚动表中的列与固定标题匹配

Question

我正在尝试创建一个带有固定标题的滚动表。问题是 the<thead>和 the之间的列<tbody>没有正确匹配。我的问题是如何让列在具有固定标题的滚动表中匹配。

下面是小提琴，只需点击“添加问题”按钮 3 次，然后滚动表格：

下面是表格的html：

<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>

下面是控制表格和每一列的主要css：

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;
}

score 1 · Accepted Answer

从 CSS 末尾删除这部分：

.tblhead, .tblbody {
    display: block;
}

示例：http: //jsfiddle.net/grc4/DC4Ps/1/

score 1 · Accepted Answer

结果在此处输入图像描述

使用以下 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>

请参阅内联评论。这个方案有个问题，要知道滚动条的宽度，兼容性不好。

<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>

score 0 · Accepted Answer

您尝试过吗：问题 textarea { min-width: auto; 最大宽度：自动；调整大小：无；高度：240px；字体大小：100%；边框：无；

score 0 · Accepted Answer

你为什么用百分比？如果你使用 px 一切都应该被修复。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;
}

</p>

javascript - 如何将滚动表中的列与固定标题匹配

4 回答 4

Related

Reference