Mam tabelę HTML zgodnie z poniższym kodem. Ma 16 kolumn. Ustawiam szerokość komórki za pomocą javascript. Gdy całkowita szerokość jest mniejsza niż 100%, działa dobrze.Komórki tabeli są ukrywane, gdy całkowita szerokość jest większa niż 100%
Gdy całkowita szerokość przekracza 100%, chcę wyświetlić horizontal scroll bar. Ale gdy zmieniłem szerokość zaznaczonej na żółto komórki z 5% na 30%, wszystkie pozostałe komórki zostaną ukryte zamiast pojawienia się paska przewijania.
PYTANIA:
- Dlaczego pasek przewijania nie pojawia się w chwili obecnej?
- Jak możemy sprawić, aby działała prawidłowo, wyświetlając
scroll bar? (również dwie kolumny po żółtej kolumnie powinienvisible; nie ukryte)
Uwaga: Emisja zauważyć w IE8.
Uwaga: Dla kodu należy wpisać http://jsfiddle.net/Lijo/dYSfN/2/. To nie pokazuje problemu. Do wizualizacji problemu, skopiuj kod do pliku HTML i otwórz za pomocą IE8
UPDATE
Podczas hiding a column, pozostałe kolumny szerokość automatycznie dostosowuje się do szerokości stołu w Firefox i Chrome, ale nie w IE8. W IE8 szerokość stołu shrinks.
szczegóły problemu
Kiedy Żółty Wyróżnione komórki szerokość wynosi 5%
Kiedy Żółty Wyróżnione komórki szerokość wynosi 30%
STYLE
.gridTableBorder
{
overflow:scroll;
border: 2px solid green;
}
/*GridView Tables*/
.resultGridTable
{
table-layout: fixed; /*Needed along with word wrap */
}
.resultGridTable th
{
background-color: #A7A7A6;
color: #ffffff;
padding: 2px 5px 2px 5px;
font: bold 9pt Arial;
border: 1px solid red;
word-wrap: break-word;
}
.resultGridTable td
{
padding: 0px 5px 0px 5px;
font: normal 9pt Arial;
word-wrap: break-word;
border: 1px solid blue;
}
JAVASCRIPT
$(document).ready(function() {
//Width Setting
var numberOfColumns = 16;
$('.resultGridTable th, .resultGridTable td').each(function (i) {
if (i % numberOfColumns == 0) {
$(this).css('width', '1%');
}
if (i % numberOfColumns == 1) {
$(this).css('width', '10%');
}
if (i % numberOfColumns == 2) {
$(this).css('width', '9%');
}
if (i % numberOfColumns == 3) {
$(this).css('width', '8%');
$(this).css('background-color', 'orange');
}
if (i % numberOfColumns == 4) {
$(this).css('width', '6%');
}
if (i % numberOfColumns == 5) {
$(this).css('width', '8%');
}
if (i % numberOfColumns == 6) {
$(this).css('width', '5%');
}
if (i % numberOfColumns == 7) {
$(this).css('width', '5%');
}
if (i % numberOfColumns == 8) {
$(this).css('width', '5%');
}
///
if (i % numberOfColumns == 9) {
$(this).css('width', '7%');
}
if (i % numberOfColumns == 10) {
$(this).css('width', '8%');
$(this).css('background-color', 'orange');
}
if (i % numberOfColumns == 11) {
$(this).css('width', '5%');
}
if (i % numberOfColumns == 12) {
$(this).css('width', '5%');
}
if (i % numberOfColumns == 13) {
$(this).css('width', '30%');
$(this).css('background-color', 'Yellow');
}
if (i % numberOfColumns == 14) {
$(this).css('width', '7%');
}
if (i % numberOfColumns == 15) {
$(this).css('width', '7%');
}
}
);
//Hide Is Summary Row Column
var selectedElements = $("tr").find("th:first, td:first");
$(selectedElements).hide();
}
);
HTML
<body>
<form method="post" action="LocalTaxReport.aspx" id="form1">
<div id="wrapper">
<div id="container">
<div id="centralContainer">
<div id="mainContainer">
<div id="contentHolderDiv" class="contentHolderDiv">
<div id="resultContainer" class="resultContainerDiv">
<div id="gridDiv" class="gridTableBorder">
<div>
<table class="resultGridTable" cellspacing="0" id="detailContentPlaceholder_grdLocalTaxReport"
style="border-collapse: collapse;">
<tr>
<th scope="col">
IsSummaryRow
</th>
<th scope="col">
Associate
</th>
<th scope="col">
My Amount
</th>
<th scope="col">
Federal Withholding
</th>
<th scope="col">
Social Security
</th>
<th scope="col">
Medicaring
</th>
<th scope="col">
State Tax
</th>
<th scope="col">
County Tax
</th>
<th scope="col">
City Tax
</th>
<th scope="col">
Total
</th>
<th scope="col">
State
</th>
<th scope="col">
State Code
</th>
<th scope="col">
County
</th>
<th scope="col">
County Code
</th>
<th scope="col">
City
</th>
<th scope="col">
City Code
</th>
</tr>
<tr>
<td>
False
</td>
<td>
Mary Dryden
</td>
<td>
$3450
</td>
<td>
$32
</td>
<td>
$5
</td>
<td>
$2
</td>
<td>
$10
</td>
<td>
$1
</td>
<td>
$2
</td>
<td>
$3400
</td>
<td>
Arkansas
</td>
<td>
AR
</td>
<td>
Benton
</td>
<td>
04567
</td>
<td>
Bentonville
</td>
<td>
23156
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="clear">
</div>
</div>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.js"></script>
</body>
Czy masz inne CSS wpływające na to, co nie zostało tu zamieszczone? Pytam, ponieważ nie widzę zachowania, które opisujesz, kiedy ustawiam kod i uruchamiam go na IE8. Co to jest CSS dla wszystkich elementów opakowania, w których ta tabela jest pochowana? – ScottS
@ScottS Nie mam żadnych innych CSS. Cały kod został opublikowany tutaj. Z odpowiedzi Enrico wygląda na to, że jest to reprodukcjum – Lijo
Kiedy ustawię stronę i wyświetlam w IE8 na 30%, to po prostu wymusza dostosowanie innych szerokości komórek tabeli, aby utrzymać tabelę na 100% szerokości. Jestem w systemie Windows 7 w trybie IE9, aby wyświetlić tryb przeglądarki IE8. Sądzę więc, że nie mogę pomóc. – ScottS