Table cells get hidden when total width is more than 100%
Question
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>
5 answers
solution1
18 ACCPTED 2012-11-30 21:53:22
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>
solution2
2 2012-11-30 11:11:36
这不是一个完美的解决方案，但将表格宽度设置为120％并将列宽更改为表格宽度的百分比（因此它们总和达到100％）可以达到预期的效果。
solution3
1 2012-11-28 11:44:32
forgive me if i am wrong, but can't this be solved by adding overflow:scroll; as a css rule for the div that contains the table?
solution4
1 2012-12-01 13:15:16
If we need to keep the table-layout as fixed in IE8, then below workaround needs to be added after hiding the columns:
:
:
$(selectedElements).hide();
// Add the workaround after the above line (or when hiding of columns is done).
$(".resultGridTable").attr("style","display:inline-table;");
window.setTimeout(function(){$(".resultGridTable").attr("style","");},0);
This is a bug in IE8, but it seems Microsoft has not responded on any resolution. If you find any information, please post it here.
But I have tried the workaround, still it does not give the desired output.
Just added it here, so that it might help in some more R&D.
References:
Workaround:
IE8 isn't resizing tbody or thead when a column is hidden in a table with table-layout:fixed
http://srikanthgade.blogspot.in/2010/09/ie8-standards-table-layout-fixed.html
solution5
1 2012-12-05 07:15:08
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.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;
}
</style>
<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, .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();
}
);
</script>
</head>
<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="1" 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>
</body>
</html>
I have just go through your problem, i have done some R&D on your code and css. I have just removed the table-layout:fixed and word-wrap:break-word;
Which was giving issue in IE8 as well as in IE7. In your screen shot 2 in which cell height is increased due to word-wrap:break-word.
In other browsers it was working fine. Just copy the code and check in your browser. If your needs are fulfilling without using table-layout:fixed and word-wrap css property than this is your solution.
@Lijo if i am missing something please let me know.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.