Таблица выровнена правильно в каждой панели браузера IE - PullRequest
0 голосов
/ 23 ноября 2011

Надеюсь, это мой последний вопрос CSS.

У меня есть таблица прокрутки, где заголовки расположены с использованием abosolute, поэтому он не прокручивается при прокрутке таблицы, в то время как строки <td> располагаются как соответствующие.,Теперь проблема, с которой я столкнулся, заключается в том, что заголовки и строки моей таблицы идеально выровнены друг с другом от столбца к столбцу в каждом браузере (Opera, Firefox, Chrome, Safari), но это не совсем встраивается в Internet Explorer.Это около 8-12 пикселей в конце заголовков таблицы.Кажется, что когда вы идете вдоль заголовков таблицы, он теряет пиксель для каждого заголовка.

Почему это происходит?

html table:

    <h1>PREPARE QUESTIONS AND ANSWERS</h1>
    <br/>
    <div id="tableWrapper">
    <div id="tableScroll">
    <table id="qandatbl" align="center">
    <thead>
    <tr>
    <th class="col1">Question No</th>
    <th class="col2">Option Type</th>
    <th class="col1">Duration</th>
    <th class="col2">Weight(%)</th>
    <th class="col1">Answer</th>
    <th class="col3">Video</th>
    <th class="col4">Audio</th>
    <th class="col3">Image</th>
    </tr>
    </thead>
    <tbody>


    <tr>
    <td class="qid"><?php echo $i; ?></td>
    <td class="options"></td>
    <td class="duration"></td>
    <td class="weight"></td>
    <td class="answer"></td>
    <td class="video"></td>
    <td class="audio"></td>
    <td class="image"></td>
    </tr>
    </tbody>

</table>
</div>
</div>

css:

#qandatbl{
 font-size:14px;
 border-collapse:collapse;
 margin:0px;
 text-align:center;
 margin-left:auto; 
 margin-right:auto;
            }

.col1{

                background-color:#FCF6CF; 
            max-width:125px;
            min-width:125px;    
            border: 1px solid black;
            }
            .col2{
            background-color:#FEFEF2;
            max-width:125px;
            min-width:125px;;  
            border: 1px solid black;    
            }   
            .col3{
            background-color:#FEFEF2; 
            max-width:350px;
            min-width:350px;    
            border: 1px solid black;
            }
            .col4{
            background-color:#FCF6CF;
            max-width:350px;
            min-width:350px;    
            border: 1px solid black;
            }
                .options{
            overflow:hidden;
            max-width:125px;       
            min-width:125px;
            background-color:#FCF6CF;
            border: 1px solid black;
                }
            .duration{
            overflow:hidden;
            max-width:125px;
            min-width:125px;
            background-color:#FEFEF2;
            border: 1px solid black;
                }
            .weight{
            overflow:hidden;
            max-width:125px;
            min-width:125px;
            background-color:#FCF6CF;
            border: 1px solid black;
                }
             .answer{
            overflow:hidden;
            max-width:125px;
            min-width:125px;
            background-color:#FEFEF2;
            border: 1px solid black;
                }
            .qid{
            overflow:hidden;
            max-width:125px;
            min-width:125px;
            background-color:#FEFEF2;
            border: 1px solid black;
                }
            .video{
            overflow:hidden;
            max-width:350px;
            min-width:350px;
            background-color:#FCF6CF;
            border: 1px solid black;
                }
            .audio{
            overflow:hidden;
            max-width:350px;
            min-width:350px;
            background-color:#FEFEF2;
            border: 1px solid black;
                }
            .image{
            overflow:hidden;
            max-width:350px;
            min-width:350px;
            background-color:#FCF6CF;
            border: 1px solid black;
                }
             #tableWrapper {
  position:relative;
}
#tableScroll {
  height:300px;
  overflow:auto;  
  margin-top:20px;
}

#tableWrapper thead tr {
position:absolute;
top:-24px;
}  
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...