当总宽度超过100％时，表格单元格会被隐藏
我有一个HTML表，如下面的代码所示。这有16列。我正在使用javascript设置单元格宽度。当总宽度小于100％时，它工作正常。
当总宽度超过100％时，我想显示horizontal scroll bar。但是当我将黄色突出显示的单元格的宽度从5％更改为30％时，所有剩余的单元格都会隐藏而不是滚动条的外观。
问题：
- 为什么滚动条目前没有出现？
- 如何通过展示
scroll bar来使其正常运作？ （黄色列之后的两列应该是visible;不是隐藏的）
注意：问题在 IE8 中注明。
注意：有关代码，请参阅http://jsfiddle.net/Lijo/dYSfN/2/。这并未显示问题。要查看问题，请将代码复制到html文件中并使用IE8打开
更新
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>
5 个答案:
答案 0 :(得分：18)
我尝试用很少的修改来达到你想要的效果，我将在这里描述它。
-
您需要设置
doctype。对于大多数当前的标记语言，DOCTYPE声明是强制性的，如果没有，则无法可靠地验证文档或确定要应用的规则。 -
您没有看到滚动条，因为未设置表格的宽度。默认情况下，div需要
100%。现在将overflow属性设置为div，然后将表格的宽度设置为120%（超过div的100%）以查看滚动条。 -
120%的表格宽度并不意味着您可以将所有列宽加到120。自table-layout:fixed起，即使您将表格宽度设置为100，您也需要将所有列宽度总计为120%。 -
在您的代码中，您设置了所有列和行的宽度，而是仅将宽度应用于
th或将应用于所有行（整个表）中的所有列的第一行。< / p> -
使用
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>
答案 1 :(得分：2)
这不是一个完美的解决方案，但将表格宽度设置为120％并将列宽更改为表格宽度的百分比（因此它们总和达到100％）可以达到预期的效果。
答案 2 :(得分：1)
如果我错了，请原谅我，但是不能通过将overflow:scroll;添加为包含该表的div的css规则来解决这个问题吗？
答案 3 :(得分：1)
如果我们需要在IE8中保持表格布局的固定，那么在隐藏列之后需要添加以下解决方法：
:
:
$(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);
这是IE8中的一个错误，但似乎微软没有对任何解决方案做出回应。如果您发现任何信息，请在此处发布。
但是我已经尝试了解决方法，但仍然没有提供所需的输出。
刚刚在这里添加了它，以便它可以帮助更多的R＆amp; D.
参考文献：
解决方法：
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
答案 4 :(得分：1)
<!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>
我刚刚解决了你的问题，我已经对你的代码和css做了一些R＆amp; D.我刚刚删除了表格布局：固定和自动换行：break-word;
这在IE8和IE7中都存在问题。在你的屏幕截图2中，由于自动换行而增加了单元格高度：break-word。
在其他浏览器中它工作正常。只需复制代码并检入浏览器即可。如果您的需求在不使用表格布局的情况下实现：固定和自动换行css属性，那么这就是您的解决方案。
@Lijo如果我遗失了什么请告诉我。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？