Bagaimana untuk benar-benar menghapus batas dari tabel HTML

Tujuan saya adalah untuk membuat sebuah halaman HTML yang sama dengan "bingkai foto,". Dengan kata lain, saya ingin membuat sebuah 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 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-garis putih tipis antara sel-sel tabel, saya berarti bahwa perbatasan gambar tidak terus menerus. Bagaimana saya bisa menghindari ini ruang putih?

Brian Tompsett - 汤莱恩
Pertanyaan edit 7 November 2017 в 10:07
Pemrograman
html css html-table background-image
16 April 2011 в 2:39
378 tayangan
Larutan
<table cellspacing="0" cellpadding="0">

Dan dalam css:

table {border: none;}

EDIT: Sebagai iGEL mencatat, solusi ini secara resmi tidak dipakai lagi (masih bekerja), jadi jika anda memulai dari awal, anda harus pergi dengan jnpcl's border-collapse solusi.

Saya sebenarnya sangat tidak menyukai perubahan ini sejauh ini (don't bekerja dengan tabel yang sering). Itu membuat beberapa tugas-tugas yang sedikit lebih rumit. E. g. bila anda ingin memiliki dua berbeda perbatasan di tempat yang sama (secara visual), sedangkan salah satu yang menjadi TOP untuk baris pertama, dan kedua menjadi DASAR untuk lain-turut. Mereka akan runtuh (= hanya salah satu dari mereka akan ditampilkan). Maka anda harus belajar bagaimana perbatasan's "prioritas" dihitung dan apa gaya perbatasan adalah "kuat" (double vs padat dll.).

Saya lakukan seperti 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 perbatasan runtuh, ini tidak't bekerja karena selalu ada satu perbatasan dihapus. Aku harus melakukan ini dalam beberapa cara lain (ada solusi yang lebih ofc). Salah satu kemungkinan adalah menggunakan dengan CSS3 box-shadow:

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


.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;}​

Anda juga bisa menggunakan sesuatu seperti "alur|ridge|inset|awal" gaya perbatasan dengan hanya satu perbatasan. Tapi bagi saya, hal ini tidak optimal, karena saya dapat't control kedua warna.

Mungkin ada beberapa sederhana dan solusi yang bagus untuk runtuh perbatasan, tapi saya belum't melihat itu belum dan saya jujur belum't menghabiskan banyak waktu di atasnya. Mungkin ada seseorang di sini yang akan dapat menunjukkan kepada saya/kami ;)

Damb
Jawaban edit 25 November 2012 в 9:31
Komentar (2)
 
table {
    border-collapse: collapse;
}
Aruna Herath
Jawaban edit 6 Oktober 2018 в 3:46
Komentar (0)

Bagi saya, saya harus melakukan sesuatu seperti ini untuk benar-benar menghapus batas dari meja dan semua sel-sel. Ini tidak memerlukan memodifikasi HTML sama sekali, yang sangat membantu dalam kasus saya.

table, tr, td {
    border: none;
}
Komentar (1)

Dalam bootstrap lingkungan tidak ada jawaban atas membantu, tapi menerapkan berikut dihapus semua perbatasan: 

.noBorder {
    border:none !important;
}

Diaplikasikan sebagai: 

<td class="noBorder">
Gökhan Kurt
Jawaban edit 12 November 2016 в 10:30
Komentar (1)

Dalam bootstrap lingkungan di sini adalah solusi saya:

    <table style="border-collapse: collapse; border: none;">
        <tr style="border: none;">
            <td style="border: none;">
            </td>
        </tr>
    </table>
Komentar (0)

Ini adalah apa yang diselesaikan masalah bagi saya:

Dalam HTML tag tr, tambahkan ini: 

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

Yang dihapus semua perbatasan yang menunjukkan pada baris tabel.

Igor
Jawaban edit 8 Februari 2017 в 9:27
Komentar (1)