2009-07-17 29 views
83

Làm cách nào để ẩn hàng bảng HTML <tr> để không chiếm không gian? Tôi có một số thiết lập của <tr> thành style="display:none;", nhưng chúng vẫn ảnh hưởng đến kích thước của bảng và đường viền của bảng phản ánh các hàng ẩn.Làm cách nào để ẩn hàng bảng HTML <tr> để không chiếm không gian?

+2

Chúng có được hiển thị/ẩn liên tục không? Hoặc khi chúng bị ẩn, chúng có hiệu quả không? Bởi vì bạn có thể sử dụng javascript để chỉ loại bỏ hàng và nó có thể sẽ khắc phục vấn đề của bạn. – inkedmn

+0

Tôi muốn bắt đầu chúng như là ẩn, và sau đó hiển thị chúng nếu người dùng nhấp vào một nút để "hiển thị nhiều hơn". Khi chúng bị ẩn, tôi không muốn chúng chiếm không gian dọc. – MikeN

+0

tôi đã có cùng một vấn đề này, nếu bạn loại bỏ() hàng với javascript, nó vẫn chiếm một số không gian trong IE6. không có cách nào xung quanh sucky IE – mkoryak

Trả lời

32

Tôi thực sự muốn thấy kiểu dáng TABLE của bạn. Ví dụ. "border-collapse"

Chỉ cần đoán, nhưng nó có thể ảnh hưởng đến cách các hàng 'ẩn' được hiển thị.

+2

Nhờ Đó là phong cách thiếu – MikeN

77

Bạn có thể bao gồm một số mã không? Tôi thêm style="display:none;" vào các hàng trong bảng của mình mọi lúc và nó có hiệu quả ẩn toàn bộ hàng.

+0

đã làm việc cho tôi. Tôi đã cố gắng để thiết lập visibility: hidden trước :( – Toadums

+0

Hiện vẫn còn khoảng cách:/ – fatuhoku

3

Thêm một số chiều cao dòng sau: 0px; cỡ phông chữ: 0px; chiều cao: 0px; lề: 0; đệm: 0;

Tôi quên điều nào xảy ra. Tôi nghĩ rằng đó là dòng chiều cao cho IE6.

7

Nếu display: none; không hoạt động, cách đặt height: 0; thay thế? Cùng với biên độ âm (bằng hoặc lớn hơn chiều cao của đường viền trên cùng và dưới cùng, nếu có) để loại bỏ thêm phần tử? Tôi không tưởng tượng rằng position: absolute; top: 0; left: -4000px; sẽ hoạt động nhưng có thể đáng để thử.

Về phần tôi, sử dụng display: none hoạt động tốt.

2

Điều này xảy ra với tôi và tôi đã bối rối là tại sao. Sau đó, tôi nhận thấy rằng nếu tôi loại bỏ bất kỳ nbsp; tôi đã có trong các hàng, sau đó các hàng không chiếm bất kỳ không gian nào.

4

Tôi đã gặp sự cố tương tự, thậm chí tôi đã thêm kiểu = "display: none" vào mỗi ô.

Cuối cùng tôi sử dụng HTML bình luận <!-- [HTML] -->

41

Bạn có thể đặt <tr id="result_tr" style="display: none;"> và sau đó hiển thị nó trở lại với JavaScript:

var result_style = document.getElementById('result_tr').style; 
result_style.display = 'table-row'; 
+4

mát đây là những gì tôi đang tìm kiếm :) – kmario23

+3

Thank-you !!.! Ẩn là dễ dàng, nhưng ăn chúng trở lại đang chứng minh vấn đề. –

2

Bạn có thể sử dụng màn hình style: none với tr để ẩn và nó sẽ làm việc với tất cả các trình duyệt.

-4

position: absolute sẽ xóa nó khỏi luồng bố cục và giải quyết vấn đề của bạn - phần tử sẽ vẫn ở trong DOM nhưng sẽ không ảnh hưởng đến người khác.

+0

fwiw Tôi nghĩ rằng đây là một giải pháp tuyệt vời nếu bạn muốn ẩn một cột, trong một số tình huống cụ thể. Ngoài ra, thêm 'opacity: 0' – Grapho

-3

Bạn có thể đặt

<table> 
    <tr style="visibility: hidden"></tr> 
</table> 
+4

Với' visibility: hidden; 'phần tử sẽ vẫn chiếm không gian, đó là sự khác biệt giữa các thuộc tính' visibility' và 'display' –

1
var result_style = document.getElementById('result_tr').style; 
result_style.display = ''; 

đang làm việc một cách hoàn hảo cho tôi ..

-1

HTML:

<input type="checkbox" id="attraction" checked="checked" onchange="updateMap()">poi.attraction</input> 

JavaScript:

function updateMap() { 
    map.setOptions({'styles': getStyles() }); 
} 

function getStyles() { 
    var styles = []; 
    for (var i=0; i < types.length; i++) { 
     var style = {}; 
     var type = types[i]; 
     var enabled = document.getElementById(type).checked; 
     style['featureType'] = 'poi.' + type; 
     style['elementType'] = 'labels'; 
     style['stylers'] = [{'visibility' : (enabled ? 'on' : 'off') }]; 
     styles.push(style); 
    } 
    return styles; 
} 
0

Bạn cần phải đặt sự thay đổi kiểu đầu vào ẩn, tất cả các chức năng của nó hoạt động nhưng nó không phải là hiển thị trên trang

<input type="hidden" name="" id="" value=""> 

miễn là các loại đầu vào được thiết lập để bạn có thể thay đổi phần còn lại . Chúc may mắn !!

-2

Tôi đã có cùng một vấn đề và tôi giải quyết vấn đề này. Trước đó css bị tràn: ẩn; chỉ số z: 999999;

tôi thay đổi nó để tràn: có thể nhìn thấy;

Các vấn đề liên quan