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?

yazanpro
sumber

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;)

Damb
sumber
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
91
table {
    border-collapse: collapse;
}
membanting tulang
sumber
Bekerja dengan sempurna terima kasih
Vikas Kandari
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;
}
sean.boyer
sumber
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">
Stephan
sumber
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>    
KLMN
sumber
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.

Khozanai
sumber