0

テーブルの列をテーブルの見出しに揃えるのに問題があります。ここのJsfiddleで問題なく整列している奇妙なこと：http：//jsfiddle.net/m4HB3/68/

しかし、まったく同じコードを使用する私のアプリケーションでは、列が見出しに正しく整列されません：application

私の質問は、アプリケーションでこの配置の問題を修正するために、アプリケーションに何を含める必要があるかということです。

以下はコードです：

HTML：

<table id="tableqanda" cellpadding="0" cellspacing="0">
    <thead>
    <tr>
        <th width="5%" class="questionno">Question No</th>
        <th width="23%" class="question">Question</th>
        <th width="7%" class="option">Option Type</th>
        <th width="6%" class="noofanswers">Number of Answers</th>
        <th width="7%" class="answer">Answer</th>
        <th width="6%" class="noofreplies">Number of Replies</th>
        <th width="6%" class="noofmarks">Number of Marks</th>
        <th width="11%" class="image">Image</th>
        <th width="11%" class="video">Video</th>
        <th width="11%" class="audio">Audio</th>
    </tr>
    </thead>
    </table>
    <div id="tableqanda_onthefly_container">
    <table id="tableqanda_onthefly" cellpadding="0" cellspacing="0">
    <tbody>
        <tr class="tableqandarow">
        <td width="5%" class="questionno">Question No.</td>
        <td width="23%" class="question">Question</td>
        <td width="7%" class="option">Option</td>
        <td width="6%" class="noofanswers">Number of Answers</td>
        <td width="7%" class="answer">Answer</td>
        <td width="6%" class="noofreplies">Number of Replies</td>
        <td width="6%" class="noofmarks">Number of Marks</td>
            <td width="11%" class="image"><ul><li>Image</li></ul></td>
        <td width="11%" class="video"><ul><li>Video</li></ul></td>
        <td width="11%" class="audio"><ul><li>Audio</li></ul></td>
</tr>
    </tbody>
    </table>
    </div>

CSS：

#tableqanda_onthefly_container
{
    max-height: 25px;
    width: 100%;
    overflow-y: scroll;
}


#tableqanda_onthefly
{
    width:100%;
    clear:both;
    table-layout: fixed;
}

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

#tableqanda, #tableqanda_onthefly{
    border:1px black solid;
    border-collapse:collapse;
    word-wrap:break-word;
}       

#tableqanda{
    width:97%;
    margin-left:0;
    table-layout: fixed;
    float:left;
}

#tableqanda td { 
    vertical-align: middle;
    border:1px black solid;
    border-collapse:collapse;
}

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

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


.imagetd{
    font-size:75%;  
}

.audiotd{
    font-size:75%;  
}

.videotd{
    font-size:75%;  
}

.qandaul{
    list-style-type:square;
}

ul, ul li { margin: 0; padding: 0; }
ul { margin-left: 1.3em; }
4

1 に答える 1

0

列幅の合計が100％になることはありません。これを解決するためにブラウザに任せた場合、配置が頭の中にあるものと一致するかどうかを確認することはできません。

幅を変更して合計を100％にすると、問題ないはずです。

于 2013-01-25T02:34:29.700 に答える