当总宽度超过100％时，表格单元格被隐藏。 [英] Table cells get hidden when total width is more than 100%
本文介绍了当总宽度超过100％时，表格单元格被隐藏。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个HTML表，如下面的代码所示。这有16列。我使用javascript设置单元格的宽度。当总宽度小于100％时，它工作正常。
当总宽度超过100％时，我要显示一个水平滚动条。但是，当我将黄色突出显示的单元格的宽度从5％更改为30％时，所有剩余的单元格将隐藏，而不是出现滚动条。
问题：
- 为什么滚动条 c> （另外，黄色列后的两列应
可见;未隐藏）
注意：问题已在 IE8 中注明。
注意：请参阅
完整代码：
;！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head id =Head1>
< title>我的报告< / title>
< style type =text / css>
/ * GridView表* /
.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 =contentHolderDivclass =contentHolderDiv>
< div id =resultContainerclass =resultContainerDiv>
< div id =gridDivclass =gridTableBorder>
< div>
< table class =resultGridTablecellspacing =0id =detailContentPlaceholder_grdLocalTaxReport
style =border-collapse：collapse;>
< tr>
< th scope =col> IsSummaryRow< / th>
< th scope =col> Associate< / th>
< th scope =col>我的金额< / th>
< th scope =col>联邦预扣税< / th>
< th scope =col>社会保障< / th>
< th scope =col> Medicaring< / th>
< th scope =col>州税< / th>
< th scope =col>县税< / th>
< th scope =col>城市税< / th>
< th scope =col>总计< / th>
< th scope =col>状态< / th>
< th scope =col>州代码< / th>
< th scope =col>县< / th>
< th scope =col>县代码< / th>
< th scope =col> City< / th>
< th scope =col>城市代码< / th>
< / tr>
< tr>
< td> False< / td>
< td> Mary Dryden< / td>
< td> $ 3450< / td> ¥b $ b< td> $ 32< / td>
< td> $ 5< / td>
< td> $ 2< / td>
< td> $ 10< / td>
< td> $ 1< / td>
< td> $ 2< / td>
< td> $ 3400< / td>
< td>阿肯色州< / 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 / javascriptsrc =http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.js>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
//宽度设置
var numberOfColumns = 16;
$（'。resultGridTable th'）。each（function（i）{
if（i％numberOfColumns == 0）{
$（this）.css ，'1％'）;
} else if（i％numberOfColumns == 1）{
$（this）.css（'width'，'10％'）;
} else if（i％numberOfColumns == 3）{
$（this）.css（'width'，'9％'）;
} b $（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％'）
}
}）;
//隐藏是摘要行列
var selectedElements = $（tr）。find（th：first，td：first）;
$（selectedElements）.hide（）;
}）;
< / script>
< / body>
< / html>
I have a HTML table as given in the following code. This has 16 columns. I am setting the cell width using javascript. When the total width is less than 100%, it is working fine.
When the total width exceeds 100%, I want to display a horizontal scroll bar. But when I changed the width of the yellow highlighted cell from 5% to 30%, all the remaining cells get hidden instead of appearance of a scroll bar.
QUESTIONS:
- Why the scrollbar is not appearing at present ?
- How can we make it to work appropriately by showing
scroll bar? (Also the two columns after the yellow column shouldvisible; not hidden)
Note: The issue is noted in IE8.
Note: Refer http://jsfiddle.net/Lijo/dYSfN/2/ for code. This does not show the issue. For visualizing the issue, please copy the code into a html file and open using IE8
UPDATE
While hiding a column, remaining columns width automatically adjusts to table width in Firefox and Chrome but not in IE8. In IE8 the table width shrinks.
Issue Details
When Yellow Highlighted Cell Width is 5%
When Yellow Highlighted Cell Width is 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>
解决方案
I tried to achieve the desired effect you had with few modification and I am going to describe it here.
You need to set the
doctype. A DOCTYPE Declaration is mandatory for most current markup languages and without one it is impossible to reliably validate a document or determine what rules to apply.You are not seeing the scroll bars because the width of table is not set. The div by default takes
100%. Now set theoverflowproperty to the div and then set the width of the table to120%(that exceeds the div's100%) to see the scroll bars.Table width of
120%doesn't mean you can sum of all column width to120. Since thetable-layout:fixed, You need to tally sum of all columns width to100even if you set the table width as120%.In you code you were setting the width of all columns and rows, instead apply width only to
thor the first row which will apply with to all columns in all rows (entire table).Modified your code from using
if..if..ifto useif..else if..else if
Note: 4 and 5 are improvements from the existing code.
DEMO: http://jsfiddle.net/FP7MF/2/embedded/result/
Full Code:
<!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>
这篇关于当总宽度超过100％时，表格单元格被隐藏。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
