Tôi có bảng HTML như được đưa ra trong mã sau. Điều này có 16 cột. Tôi đang thiết lập chiều rộng ô bằng javascript. Khi tổng chiều rộng nhỏ hơn 100%, nó hoạt động tốt.Các ô bảng bị ẩn khi tổng chiều rộng lớn hơn 100%
Khi tổng chiều rộng vượt quá 100%, tôi muốn hiển thị horizontal scroll bar. Nhưng khi tôi thay đổi chiều rộng của ô được đánh dấu màu vàng từ 5% đến 30%, tất cả các ô còn lại sẽ bị ẩn thay vì xuất hiện của thanh cuộn.
CÂU HỎI:
- Tại sao các thanh cuộn không xuất hiện hiện nay?
- Làm cách nào chúng ta có thể làm cho nó hoạt động phù hợp bằng cách hiển thị
scroll bar? (Ngoài ra hai cột sau cột vàng nênvisible; không ẩn)
Lưu ý: Vấn đề cần lưu ý trong IE8.
Lưu ý: Tham khảo http://jsfiddle.net/Lijo/dYSfN/2/ để biết mã. Điều này không hiển thị vấn đề. Đối với hình dung vấn đề, hãy sao chép mã vào một file html và mở sử dụng IE8
CẬP NHẬT
Trong khi hiding a column, cột còn lại rộng tự động điều chỉnh chiều rộng bảng trong Firefox và Chrome nhưng không phải trong IE8. Trong IE8 chiều rộng bảng shrinks.
Issue Chi tiết
Khi Vàng Tóc Highlight di Width là 5%
Khi Vàng Tóc Highlight di Width là 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>
Bạn có CSS nào khác ảnh hưởng đến điều này không được đăng ở đây không? Tôi hỏi, bởi vì tôi không thấy hành vi mà bạn mô tả khi tôi thiết lập mã của bạn và chạy nó trên IE8. CSS cho tất cả các yếu tố bao bọc mà bảng này được chôn trong là gì? – ScottS
@ScottS Tôi không có bất kỳ CSS nào khác. Tất cả các mã được đăng ở đây. Từ câu trả lời của Enrico nó có vẻ như nó là tái sản xuất – Lijo
Khi tôi thiết lập một trang và xem trong IE8 ở mức 30%, nó chỉ buộc các điều chỉnh độ rộng ô bảng khác để giữ cho bảng ở độ rộng 100%. Tôi đang xem Windows 7 trong IE9 để hiển thị chế độ trình duyệt IE8. Vì vậy, tôi đoán tôi không thể giúp được gì. – ScottS