Bagaimana cara menyembunyikan baris tabel HTML <tr> sehingga tidak membutuhkan ruang?

105

Bagaimana cara menyembunyikan baris tabel HTML <tr>agar tidak memakan ruang? Saya memiliki beberapa <tr>set ke style="display:none;", tetapi mereka masih mempengaruhi ukuran tabel dan batas tabel mencerminkan baris tersembunyi.

MikeN
sumber
2
Apakah mereka berulang kali ditampilkan / disembunyikan? Atau ketika mereka disembunyikan, apakah mereka secara efektif pergi untuk selamanya? Karena Anda dapat menggunakan javascript untuk hanya menghapus baris dan itu mungkin akan memperbaiki masalah Anda.
brettkelly
Saya ingin memulainya sebagai tersembunyi, lalu menampilkannya jika pengguna mengklik tombol untuk "menampilkan lebih banyak". Saat disembunyikan, saya tidak ingin mereka mengambil ruang vertikal.
MikeN
saya punya masalah yang sama, jika Anda menghapus () baris dengan javascript, masih membutuhkan beberapa ruang di IE6. tidak ada jalan lain yang buruk IE
mkoryak
1
Doctype apa yang Anda gunakan? Saya menerima bahwa fakta sederhana yang Anda posting di SO dengan reputasi yang baik menunjukkan bahwa Anda mungkin cukup tahu untuk menghindari mode quirks ... tetapi satu-satunya pertanyaan bodoh adalah pertanyaan yang tidak ditanyakan. ... dan tentang burung budgerigars, tentunya.
David mengatakan mengembalikan Monica
1
Saya baru saja menguji di FF 3.5 dan IE8 - keduanya menyembunyikan baris dengan tampilan: tidak ada
17 dari 26

Jawaban:

37

Saya sangat ingin melihat gaya TABLE Anda. Misalnya "batas-runtuh"

Hanya tebakan, tetapi ini mungkin memengaruhi bagaimana baris 'tersembunyi' ditampilkan.

baik w
sumber
2
Terima kasih! Itu adalah gaya yang hilang.
MikeN
100

Bisakah Anda memasukkan beberapa kode? Saya menambahkan style="display:none;"baris tabel saya sepanjang waktu dan secara efektif menyembunyikan seluruh baris.

Calvin
sumber
bekerja untuk saya. Saya mencoba menyetel visibilitas: disembunyikan sebelumnya :(
Toadums
Masih ada jarak: /
fatuhoku
bagaimana mencegah ini dari mengubah lebar tabel ketika Anda menampilkan baris sembunyikan, saya tidak ingin melakukan tata letak tabel diperbaiki
PirateApp
57

Anda dapat mengatur <tr id="result_tr" style="display: none;">dan kemudian menampilkannya kembali dengan JavaScript:

var result_style = document.getElementById('result_tr').style;
result_style.display = 'table-row';
Jamshid Hashimi
sumber
5
Keren! inilah yang saya cari :)
kmario23
4
Terima kasih!! Menyembunyikan itu mudah, tetapi menyatukannya kembali terbukti bermasalah.
Gua Jefferey
ini mengubah lebar tabel, saya melakukan filter di mana baris harus disembunyikan berdasarkan apa yang ada di dalam kotak
pencarian
13

Pikir saya akan menambahkan ini solusi potensial lainnya:

<tr style='visibility:collapse'><td>stuff</td></tr>

Saya hanya mengujinya di Chrome tetapi meletakkan ini di <tr>menyembunyikan baris PLUS semua sel di dalam baris masih berkontribusi pada lebar kolom. Saya terkadang akan membuat baris tambahan di bagian bawah tabel hanya dengan beberapa spacer yang membuatnya sehingga kolom tertentu tidak boleh kurang dari lebar tertentu, lalu menyembunyikan baris tersebut menggunakan metode ini. (Saya tahu Anda seharusnya dapat melakukan ini dengan css lain tetapi saya tidak pernah berhasil)

Sekali lagi, saya berada dalam lingkungan chrome murni jadi saya tidak tahu bagaimana ini berfungsi di browser lain.

rgbflawed
sumber
1
Ini berfungsi di sebagian besar browser modern, dengan pengecualian Safari, yang menampilkan spasi kosong daripada menyembunyikan baris: developer.mozilla.org/en-US/docs/Web/CSS/visibility
Oscar Scholten
8

Jika display: none;tidak berhasil, bagaimana dengan pengaturan height: 0;? Dalam hubungannya dengan margin negatif (sama dengan, atau lebih besar dari, tinggi batas atas dan bawah, jika ada) untuk menghapus elemen lebih lanjut? Saya tidak membayangkan itu position: absolute; top: 0; left: -4000px;akan berhasil, tetapi mungkin patut dicoba.

Bagi saya, menggunakan display: noneberfungsi dengan baik.

David mengatakan kembalikan Monica
sumber
4

Tambahkan beberapa line-height berikut: 0px; font-size: 0px; height: 0px; margin: 0; padding: 0;

Saya lupa yang mana yang melakukannya. Saya pikir itu garis-tinggi untuk IE6.

s_hewitt
sumber
4

Saya mengalami masalah yang sama, saya bahkan menambahkan style = "display: none" ke setiap sel.

Pada akhirnya saya menggunakan komentar HTML <!-- [HTML] -->

Simon Hughes
sumber
4

Anda dapat menggunakan tampilan gaya: tidak ada dengan tr untuk disembunyikan dan ini akan bekerja dengan semua browser.

Shahid Siddique
sumber
3
var result_style = document.getElementById('result_tr').style;
result_style.display = '';

bekerja dengan sempurna untuk saya ..

Vignesh
sumber
2

Ini terjadi pada saya dan saya bingung mengapa. Kemudian saya perhatikan bahwa jika saya menghapus nbsp; saya punya di dalam baris, maka baris tidak memakan tempat.

Kevin H.
sumber
-1

Anda perlu mengubah jenis input menjadi tersembunyi, semua fungsinya berfungsi tetapi tidak terlihat di halaman

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

selama jenis masukan disetel sehingga Anda dapat mengubah sisanya. Semoga berhasil!!

pengguna5431987
sumber
-3

Saya mengalami masalah yang sama dan saya menyelesaikan masalah tersebut. CSS sebelumnya telah meluap: tersembunyi; z-indeks: 999999;

Saya mengubahnya menjadi overflow: terlihat;

Ray Innov
sumber
-3

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;
}
alpc
sumber
-5

position: absolute akan menghapusnya dari alur tata letak dan seharusnya menyelesaikan masalah Anda - elemen akan tetap berada di DOM tetapi tidak akan memengaruhi orang lain.

pengguna2415617
sumber
fwiw Saya pikir ini adalah solusi yang bagus jika Anda ingin menyembunyikan kolom, dalam beberapa situasi tertentu. Selain itu tambahkanopacity: 0
Grapho
-5

Anda dapat mengatur

<table>
  <tr style="visibility: hidden"></tr>
</table> 
Ramy Said
sumber
5
Dengan visibility: hidden;elemen yang masih akan memakan ruang, itulah perbedaan antara visibilitydan displayproperti
Dmitry Pashkevich
Gunakan seperti ini<table><tr style="display: none;"><td></td></tr></table>
Sanu