Cara menghapus batas dari tabel HTML


141

Tujuan saya adalah membuat halaman HTML yang mirip dengan "bingkai foto". Dengan kata lain, saya ingin membuat halaman kosong yang dikelilingi oleh 4 gambar.

Ini kode saya:

<table>
    <tr>
        <td class="bTop" colspan="3">
        </td>
    </tr>
    <tr>
        <td class="bLeft">
        </td>
        <td class="middle">
        </td>
        <td class="bRight">
        </td>
    </tr>
    <tr>
        <td class="bBottom" colspan="3">
        </td>
    </tr>                                                    
</table>

Dan kelas-kelas CSS adalah sebagai berikut:

.bTop
{
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackLeft.jpg');    

}

.middle
{
    width: 536px;
    height: 280px;
}

.bRight
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackRight.jpg');    
}

.bBottom
{        
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackBottom.jpg');       
}

Masalah saya adalah bahwa saya mendapatkan garis putih tipis antara sel-sel tabel, maksud saya bahwa batas gambar tidak kontinu. Bagaimana saya bisa menghindari ruang putih ini?

Jawaban:


179
<table cellspacing="0" cellpadding="0">

Dan dalam css:

table {border: none;}

EDIT: Seperti yang dicatat iGEL, solusi ini secara resmi sudah tidak digunakan lagi (jadi masih berfungsi), jadi jika Anda mulai dari awal, Anda harus menggunakan solusi border-collapse jnpcl.

Saya sebenarnya sangat tidak menyukai perubahan ini sejauh ini (tidak sering bekerja dengan tabel). Itu membuat beberapa tugas sedikit lebih rumit. Misalnya ketika Anda ingin memasukkan dua batas yang berbeda di tempat yang sama (secara visual), sedangkan satu menjadi TOP untuk satu baris, dan kedua menjadi BOTTOM untuk baris lainnya. Mereka akan runtuh (= hanya satu dari mereka yang akan ditampilkan). Maka Anda harus mempelajari bagaimana "prioritas" perbatasan dihitung dan gaya perbatasan apa yang "lebih kuat" (dobel vs padat, dll.).

Saya memang suka ini:

<table cellspacing="0" cellpadding="0">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>

----------

.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}

Sekarang, dengan runtuhnya perbatasan, ini tidak akan berfungsi karena selalu ada satu perbatasan yang dihapus. Saya harus melakukannya dengan cara lain (ada lebih banyak solusi ofc). Satu kemungkinan menggunakan CSS3 dengan bayangan kotak:

<table class="tab">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>​​​

<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}​
</style>

Anda juga bisa menggunakan gaya perbatasan "groove | ridge | inset | outset" hanya dengan satu perbatasan. Tetapi bagi saya, ini tidak optimal, karena saya tidak dapat mengontrol kedua warna.

Mungkin ada beberapa solusi sederhana dan bagus untuk meruntuhkan perbatasan, tapi saya belum melihatnya dan jujur ​​saya belum menghabiskan banyak waktu untuk itu. Mungkin seseorang di sini akan dapat menunjukkan kepada saya / kami;)


7
cellspacing & cellpadding sudah tidak digunakan lagi sejak 1999, lihat developer.mozilla.org/en-US/docs/HTML/Element/table - Anda harus menggunakan solusi @jnpcl.
iGEL

iGEL benar, saya telah mengedit jawaban saya. Jujur, saya terkejut, itu sudah usang untuk waktu yang lama dan saya masih menggunakannya tanpa masalah :)
Damb


19

Bagi saya, saya perlu melakukan sesuatu seperti ini untuk sepenuhnya menghapus perbatasan dari tabel dan semua sel. Ini tidak memerlukan modifikasi HTML sama sekali, yang sangat membantu dalam kasus saya.

table, tr, td {
    border: none;
}

3
Mencoba setiap saran sampai di sini, dan akhirnya border: nonemelamar tdjekyll meyakinkan untuk membuat meja tanpa batas:<td markdown="span" style="padding: 0.5vw; border: none; max-width:100%; max-height:10%; background: transparent;">
Avio

16

Dalam lingkungan bootstrap, tidak ada jawaban teratas yang membantu, tetapi menerapkan yang berikut menghapus semua batas:

.noBorder {
    border:none !important;
}

Diterapkan sebagai:

<td class="noBorder">

1
Saran ini bekerja untuk saya di Wordpress. Saya mengalami kesulitan untuk mendapatkan tidak ada perbatasan yang harus ditegakkan.
robbpriestley

7

Di lingkungan bootstrap, inilah solusi saya:

    <table style="border-collapse: collapse; border: none;">
        <tr style="border: none;">
            <td style="border: none;">
            </td>
        </tr>
    </table>    

4

Inilah yang memecahkan masalah bagi saya:

Di tag tr HTML Anda, tambahkan ini:

style="border-collapse: collapse; border: none;"

Itu menghapus semua perbatasan yang ditampilkan di baris tabel.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.