Надеюсь, это мой последний вопрос 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;
}