Bagaimana saya bisa menerapkan perbatasan hanya di dalam tabel?

195

Saya mencoba mencari cara menambahkan perbatasan hanya di dalam tabel. Ketika saya melakukannya:

table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}

Perbatasan berada di sekitar seluruh tabel dan juga di antara sel-sel tabel. Yang ingin saya capai adalah memiliki perbatasan hanya di dalam tabel di sekitar sel tabel (tanpa batas luar di sekitar tabel).

Berikut ini markup yang saya gunakan untuk tabel (walaupun saya pikir itu tidak penting):

<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

Dan inilah beberapa gaya dasar yang saya terapkan pada sebagian besar tabel saya:

table {
    border-collapse: collapse;
    border-spacing: 0;
}

— Richard Knop
sumber

Saya melihat hanya berbatasan hanya di sekitar sel. Karena masing-masing sel memiliki perbatasan, tampaknya tabel memiliki perbatasan. Mungkin saya tidak mendapatkan pertanyaan?

— Chetan S

3

Juga disebut batas internal .

— Siput mekanik

203

Jika Anda melakukan apa yang saya yakin sedang Anda coba, Anda akan membutuhkan sesuatu yang sedikit lebih seperti ini:

table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
}
table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}

Demo jsFiddle

Masalahnya adalah bahwa Anda menetapkan 'batas penuh' di sekitar semua sel, yang membuatnya tampak seolah-olah Anda memiliki perbatasan di seluruh tabel.

Bersulang.

EDIT: Sedikit info lebih lanjut tentang pseudo-class dapat ditemukan di quirksmode , dan, seperti yang diharapkan, Anda cukup banyak SOL dalam hal dukungan IE.

— theIV
sumber

Dengan tabel sederhana seperti ini, ada solusi yang jauh lebih pendek yang menghindari menggunakan pseudo-class dengan menggunakan kombinator saudara berikutnya. Lihat jawaban saya.

— dalgard

1

@theIV, dengan ini dijawab 5+ tahun yang lalu, apakah ada cara 'baru' / 'lebih efisien' seperti ini?

— jbutler483

Tidak berfungsi jika Anda pernah menggunakan rowspan pada kolom pertama dalam sebuah tabel.

— Jack

192

ini bekerja untuk saya:

table {
    border-collapse: collapse;
    border-style: hidden;
}

table td, table th {
    border: 1px solid black;
}

lihat contoh ...

diuji dalam FF 3.6 dan Chromium 5.0, IE tidak memiliki dukungan; dari W3C :

Perbatasan dengan 'gaya perbatasan' dari 'tersembunyi' didahulukan dari semua perbatasan yang saling bertentangan. Perbatasan apa pun dengan nilai ini akan menekan semua perbatasan di lokasi ini.

— anthonyrisinger
sumber

1

Selama Anda tidak membutuhkan perbatasan meja, ini jelas merupakan solusi paling elegan.

— cjroth

42

Contoh cara yang sangat sederhana bagi Anda untuk mencapai efek yang diinginkan:

<table border="1" frame="void" rules="all">
    <tr>
        <td>1111</td>
        <td>2222</td>
        <td>3333</td>
    </tr>
    <tr>
        <td>4444</td>
        <td>5555</td>
        <td>6666</td>
    </tr>
</table>

— jony
sumber

13

"MAGIC" MENJELASKAN: frame dan rulesadalah atribut LAMA (bukan HTML5) table (Anda harus menggunakan CSS sebagai gantinya). framemengatakan bagian mana dari batas tabel luar yang harus terlihat - voidberarti menyembunyikan semua batas luar ... rulesmengatakan bagian mana dari batas tabel dalam harus terlihat - allberarti semuanya ... jelas ... Tolong jangan gunakan ini, kecuali jika Anda adalah HTML3 fanatik ... :)

— jave.web

1

Menambahkan sesuatu seperti border: 1px hitam pekat akan memastikan batas terluar tabel mendapatkan border.

— Aaron Liu

1

Bekerja seperti pesona di tahun 2020 untuk dengan cepat menambah keterbacaan ke tabel dengan jarak yang sangat jauh di situs web yang saya baca. Sebenarnya, ini saja sudah cukup untuk perbatasan internal: rules = "all"

— Edoardo Facchinelli

11

Karena mantain kompatibilitas dengan ie7, ie8 saya sarankan menggunakan anak pertama dan bukan anak terakhir untuk melakukan ini:

table tr td{border-top:1px solid #ffffff;border-left:1px solid #ffffff;}

table tr td:first-child{border-left:0;}

table tr:first-child td{border-top:0;}

Anda dapat mempelajari tentang CSS 2.1 Pseudo-class di: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

— Crisboot
sumber

Ini solusi hebat. Tapi hati-hati, jika Anda memiliki tabel lain di salah satu sel tabel Anda dan ingin melihat batas bagian dalam, Anda memerlukan kumpulan garis CSS lain untuk tabel "bagian dalam" Anda

— Michael Biermann

10

Untuk markup tabel biasa, berikut ini solusi singkat yang berfungsi di semua perangkat / browser di BrowserStack, kecuali IE 7 dan di bawah ini:

table { border-collapse: collapse; }

td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }

Untuk dukungan IE 7, tambahkan ini:

tr + tr > td,
tr + tr > th { border-top: 1px solid; }

Sebuah test case dapat dilihat di sini: http://codepen.io/dalgard/pen/wmcdE

— dalgard
sumber

Hebat - karena ini juga memungkinkan seseorang untuk mengatur batas yang berbeda ke tabel, lebih baik daripada tidak menampilkannya.

— jsbueno

5

ini harus bekerja:

table {
 border:0;
}

table td, table th {
    border: 1px solid black;
    border-collapse: collapse;
}

edit:

Saya baru saja mencobanya, tidak ada batas meja. tetapi jika saya mengatur batas tabel itu dihilangkan oleh perbatasan-runtuh.

ini adalah testfile:

<html>
<head>
<style type="text/css">
table {
    border-collapse: collapse;
    border-spacing: 0;
}


table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}


</style>
</head>
<body>
<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

</body>
</html>

— Rufinus
sumber

Tidak, itu tidak berhasil. Saya sudah mencobanya. Saya akan mengedit posting pertama saya.

— Richard Knop

3

itu akan melakukan semuanya tanpa css <TABLE BORDER=1 RULES=ALL FRAME=VOID>

kode dari: TUTORIAL KODE HTML

— TwoFaceZ
sumber

0

Tambahkan batas ke setiap sel dengan ini:

table > tbody > tr > td { border: 1px solid rgba(255, 255, 255, 0.1); }

Hapus batas atas dari semua sel di baris pertama:

table > tbody > tr:first-child > td { border-top: 0; }

Hapus batas kiri dari sel di kolom pertama:

table > tbody > tr > td:first-child { border-left: 0; }

Hapus batas kanan dari sel di kolom terakhir:

table > tbody > tr > td:last-child { border-right: 0; }

Hapus batas bawah dari sel di baris terakhir:

table > tbody > tr:last-child > td { border-bottom: 0; }

http://jsfiddle.net/hzru0ytx/

— Brian
sumber

0

Berfungsi untuk semua kombinasi tbody / thead / tfoot dan td / th

table.inner-border {
    border-collapse: collapse;
    border-spacing: 0;
}

table.inner-border > thead > tr > th,
table.inner-border > thead > tr > td,
table.inner-border > tbody > tr > th,
table.inner-border > tbody > tr > td,
table.inner-border > tfoot > tr > th,
table.inner-border > tfoot > tr > td {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

table.inner-border > thead > tr > :last-child,
table.inner-border > tbody > tr > :last-child,
table.inner-border > tfoot > tr > :last-child {
    border-right: 0;
}

table.inner-border > :last-child > tr:last-child > td,
table.inner-border > :last-child > tr:last-child > th {
    border-bottom: 0;
}

<table class="inner-border">
    <thead>
    <tr>
        <th>head1,1</th>
        <td>head1,2</td>
        <td>head1,3</td>
    </tr>
    <tr>
        <td>head2,1</td>
        <td>head2,2</td>
        <th>head2,3</th>
    </tr>
    </thead>
    <tr>
        <td>1,1</td>
        <th>1,2</th>
        <td>1,3</td>
    </tr>
    <tr>
        <td>2,1</td>
        <td>2,2</td>
        <td>2,3</td>
    </tr>
    <tr>
        <td>3,1</td>
        <td>3,2</td>
        <td>3,3</td>
    </tr>
    <thead>
    <tr>
        <th>foot1,1</th>
        <td>foot1,2</td>
        <td>foot1,3</td>
    </tr>
    <tr>
        <td>foot2,1</td>
        <th>foot2,2</th>
        <th>foot2,3</th>
    </tr>
    </thead>
</table>

Luaskan cuplikan

— pengguna1119279
sumber