Ответ 1
Я попытался добиться желаемого эффекта, который у вас был с небольшим изменением, и я опишу его здесь.
-
Вам нужно установить
doctype. Декларация DOCTYPE является обязательной для большинства современных языков разметки, и без нее невозможно достоверно проверить документ или определить, какие правила применять. -
Вы не видите полосы прокрутки, потому что ширина таблицы не задана. По умолчанию div имеет значение
100%. Теперь установите свойствоoverflowв div и затем установите ширину таблицы на120%(которая превышает div100%), чтобы увидеть полосы прокрутки. -
Ширина таблицы
120%не означает, что вы можете суммировать всю ширину столбца до120. Посколькуtable-layout:fixed, вам нужно подсчитать сумму всех столбцов шириной до100, даже если вы установите ширину таблицы как120%. -
В коде вы устанавливаете ширину всех столбцов и строк, вместо этого применяете ширину только к
thили к первой строке, которая будет применяться ко всем столбцам во всех строках (целая таблица). -
Изменил код с помощью
if..if..if, чтобы использоватьif..else if..else if
Примечание. 4 и 5 - улучшения существующего кода.
DEMO: http://jsfiddle.net/FP7MF/2/embedded/result/
Полный код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>My Report </title>
<style type="text/css">
/*GridView Tables*/
.resultGridTable
{
table-layout: fixed;
width: 130%;
}
.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;
}
#gridDiv div { overflow: auto; }
</style>
</head>
<body>
<form>
<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>
<script type="text/javascript">
$(document).ready(function () {
//Width Setting
var numberOfColumns = 16;
$('.resultGridTable th').each(function (i) {
if (i % numberOfColumns == 0) {
$(this).css('width', '1%');
} else if (i % numberOfColumns == 1) {
$(this).css('width', '10%');
} else if (i % numberOfColumns == 2) {
$(this).css('width', '9%');
} else if (i % numberOfColumns == 3) {
$(this).css({'width': '8%', 'background-color': 'orange'});
} else if (i % numberOfColumns == 4) {
$(this).css('width', '6%');
} else if (i % numberOfColumns == 5) {
$(this).css('width', '8%');
} else if (i % numberOfColumns == 6) {
$(this).css('width', '5%');
} else if (i % numberOfColumns == 7) {
$(this).css('width', '5%');
} else if (i % numberOfColumns == 8) {
$(this).css('width', '5%');
} else if (i % numberOfColumns == 9) {
$(this).css('width', '7%');
} else if (i % numberOfColumns == 10) {
$(this).css({'width': '8%', 'background-color': 'orange'});
} else if (i % numberOfColumns == 11) {
$(this).css('width', '5%');
} else if (i % numberOfColumns == 12) {
$(this).css('width', '5%');
} else if (i % numberOfColumns == 13) {
$(this).css({'width': '8%', 'background-color': 'Yellow'});
} else if (i % numberOfColumns == 14) {
$(this).css('width', '5%');
} else if (i % numberOfColumns == 15) {
$(this).css('width', '5%');
}
});
//Hide Is Summary Row Column
var selectedElements = $("tr").find("th:first, td:first");
$(selectedElements).hide();
});
</script>
</body>
</html>