मेरे पास निम्न कोड में दी गई HTML तालिका है। इसमें 16 कॉलम हैं। मैं जावास्क्रिप्ट का उपयोग कर सेल चौड़ाई निर्धारित कर रहा हूँ। जब कुल चौड़ाई 100% से कम है, तो यह ठीक काम कर रही है।तालिका की कोशिकाएं छिपी जाती हैं जब कुल चौड़ाई 100% से अधिक
जब कुल चौड़ाई 100% से अधिक हो जाती है, तो मैं horizontal scroll bar प्रदर्शित करना चाहता हूं। लेकिन जब मैंने पीले हाइलाइट किए गए सेल की चौड़ाई 5% से 30% तक बदल दी, तो सभी शेष कोशिकाएं स्क्रॉल बार की उपस्थिति के बजाय छिपी हुईं।
प्रश्न:
- क्यों स्क्रॉलबार वर्तमान में दिखाई दे रहा है?
scroll barदिखाकर हम इसे उचित तरीके से कैसे काम कर सकते हैं? (इसके अलावा दो पीले स्तंभ चाहिएvisibleके बाद कॉलम; छिपी नहीं)
नोट: इस मुद्दे को IE8 में विख्यात है।
नोट: कोड के लिए http://jsfiddle.net/Lijo/dYSfN/2/ देखें। यह मुद्दा नहीं दिखाता है। मुद्दा visualizing के लिए, एक HTML फ़ाइल में कोड को कॉपी करें और IE8
अद्यतन
का उपयोग कर खुला जबकि hiding a column, शेष कॉलम चौड़ाई स्वचालित रूप से फ़ायरफ़ॉक्स और क्रोम में तालिका चौड़ाई को समायोजित कर देता है, लेकिन नहीं 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();
}
);
एचटीएमएल
<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>
आप अन्य सीएसएस इस जाता है कि यहां पोस्ट नहीं प्रभावित कर रहा है? मैं पूछता हूं, क्योंकि जब मैं आपका कोड सेट करता हूं और इसे IE8 पर चलाता हूं तो मुझे आपके द्वारा वर्णित व्यवहार दिखाई नहीं देता है। इस तालिका को दफन किए गए सभी रैपर तत्वों के लिए सीएसएस क्या है? – ScottS
@ स्कॉट्स मेरे पास कोई अन्य सीएसएस नहीं है। सभी कोड यहां पोस्ट किया गया है। एनरिको के जवाब से ऐसा लगता है जैसे कि यह reproducbale – Lijo
है जब मैं 30% पर एक पेज और IE8 में दृश्य सेट अप, यह सिर्फ बलों अन्य तालिका सेल चौड़ाई समायोजित कर देता है 100% चौड़ाई पर तालिका रखने के लिए। मैं आईई 9 ब्राउज़र मोड को दिखाने के लिए आईई 9 सेट में विंडोज 7 देख रहा हूं। तो मुझे लगता है कि मैं किसी भी मदद से नहीं हो सकता। – ScottS