当总宽度超过100%时,表格单元格会被隐藏
LCJ*_*LCJ 24 html javascript css jquery
我有一个HTML表,如下面的代码所示.这有16列.我正在使用javascript设置单元格宽度.当总宽度小于100%时,它工作正常.
当总宽度超过100%时,我想显示一个horizontal scroll bar.但是当我将黄色突出显示的单元格的宽度从5%更改为30%时,所有剩余的单元格都会隐藏而不是滚动条的外观.
问题:
- 为什么滚动条目前没有出现？
- 我们怎样才能通过展示让它适当地发挥作用
scroll bar？(也是黄色列之后的两列visible;不是隐藏的)
注意:IE8中注明了该问题.
注意:请参阅http://jsfiddle.net/Lijo/dYSfN/2/以获取代码.这并未显示问题.要查看问题,请将代码复制到html文件中并使用IE8打开
UPDATE
而hiding a column在Firefox和Chrome中,剩余列宽会自动调整为表格宽度,而在IE8中则不然.在IE8中表宽度shrinks.
问题详情
当黄色突出显示的单元格宽度为5%时
当黄色突出显示的单元格宽度为30%时
样式
.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>
Sel*_*gam 18
我尝试用很少的修改来达到你想要的效果,我将在这里描述它.
你需要设置
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是现有代码的改进.
演示: 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>
- 您是否阅读了第3项,其中讨论了列宽总和不超过"100"的情况.如果您将其计算为"100%",它将起作用. (3认同)
- @Lijo每个浏览器都有自己的规则和解析技术.使用表格布局`固定`并使其在IE中工作.你需要把它计算到'100`.是的,很多东西在FF和Chrome中有效,但在IE中却没有,这就是其中之一.1. http://blogs.msdn.com/b/ie/archive/2005/02/10/370721.aspx 2. http://msdn.microsoft.com/en-us/library/ms533002%28v=vs 0.85%29.aspx (3认同)