0

ヘッダーが固定されたスクロールテーブルを作成しようとしています。<thead>問題は、との間の列が<tbody>正しく一致していないことです。私の質問は、固定ヘッダーのあるスクロールテーブルで列を一致させるにはどうすればよいですか。

以下はフィドルです。[質問を追加]ボタンを3回クリックして、表をスクロールします。

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

以下は表の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;
}
4

4 に答える 4

1

CSSの最後からこの部分を削除します。

.tblhead, .tblbody {
    display: block;
}

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

于 2012-12-23T00:24:34.180 に答える
1

結果 ここに画像の説明を入力

次の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>
于 2012-12-23T04:24:17.027 に答える
0

試しましたか: question textarea { min-width: auto; 最大幅: 自動; サイズ変更: なし; 高さ: 240px; フォントサイズ: 100%; ボーダー: なし;

于 2012-12-23T00:29:56.070 に答える
0

なぜパーセンテージを使うのですか？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>

于 2012-12-23T00:36:07.083 に答える