Memberi batas ke baris tabel HTML, <tr>

Apakah mungkin untuk membatasi baris tabel, <tr>sekaligus daripada memberikan batas ke sel individu, <td>seperti,

<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
    <tbody>
        <tr>
            <th style="width: 96px;">Column 1</th>
            <th style="width: 96px;">Column 2</th>
            <th style="width: 96px;">Column 3</th>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

Ini memberi batas di sekitar yang diberikan <tr>tetapi membutuhkan batas di sekitar sel individu.

Bisakah kita memberi batas <tr>hanya dalam sekali jalan?

→ jsFiddle

Anda dapat menyetel borderproperti pada sebuah trelemen, tetapi sesuai dengan spesifikasi CSS 2.1, properti tersebut tidak berpengaruh dalam model perbatasan yang terpisah, yang cenderung menjadi default di browser. Referensi: 17.6.1 Model batas terpisah . (The awal nilai border-collapseadalah separatesesuai dengan CSS 2.1, dan beberapa browser juga mengaturnya sebagai nilai default untuk table. Efek bersih pula adalah bahwa Anda mendapatkan terpisah perbatasan di hampir semua browser kecuali Anda secara eksplisit spesifik collapse.)

Jadi, Anda perlu menggunakan batas yang runtuh. Contoh:

<style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>

Benar! Gunakan saja

<tr style="outline: thin solid">

di baris mana saja yang Anda suka. Ini biola .

Tentu saja, seperti yang disebutkan orang, Anda dapat melakukan ini melalui id, atau kelas, atau cara lain jika Anda mau.

Iya. Saya memperbarui jawaban saya DEMO

table td {
    border-top: thin solid; 
    border-bottom: thin solid;
}

table td:first-child {
     border-left: thin solid;
}

table td:last-child {
     border-right: thin solid;
}

Jika Anda ingin membuat gaya hanya satu, <tr>Anda dapat melakukannya dengan kelas: DEMO Kedua

Memanfaatkan kelas CSS:

tr.border{
    outline: thin solid;
}

dan gunakan seperti:

<tr class="border">...</tr>

Anda dapat menggunakan properti box-shadow pada elemen tr sebagai pengganti untuk sebuah perbatasan. Sebagai nilai tambah, properti radius-batas pada elemen yang sama juga akan diterapkan ke bayangan kotak.

box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);

Sel kiri:

style="border-style:solid;border-width: 1px 0px 1px 1px;"

sel tengah:

style="border-style:solid;border-width: 1px 0px 1px 0px;"

sel kanan:

style="border-style:solid;border-width: 1px 1px 1px 0px;"

menambahkan spasi pembatas: 0rem 0.5rem; membuat spasi untuk setiap item sel (td, th) di bagian bawahnya tanpa menyisakan spasi di antara sel

    table.app-table{
        border-collapse: separate;
        border-spacing: 0rem 0.5rem;
    }
    table.app-table thead tr.border-row the,
    table.app-table tbody tr.border-row td,
    table.app-table tbody tr.border-row th{
        border-top: 1px solid #EAEAEA;
        border-bottom: 1px solid #EAEAEA;
        vertical-align: middle;
        white-space: nowrap;
        font-size: 0.875rem;
    }

    table.app-table thead tr.border-row th:first-child,
    table.app-table tbody tr.border-row td:first-child{
        border-left: 1px solid #EAEAEA;
    }

    table.app-table thead tr.border-row th:last-child,
    table.app-table tbody tr.border-row td:last-child{
        border-right: 1px solid #EAEAEA;
    }

Setelah berjuang dengan ini untuk waktu yang lama, saya menyimpulkan bahwa jawaban sederhana yang spektakuler adalah mengisi tabel dengan sel-sel kosong untuk mengisi setiap baris tabel ke jumlah sel yang sama (dengan mempertimbangkan colspan, tentu saja). Dengan HTML yang dihasilkan komputer, hal ini sangat mudah diatur, dan menghindari pertarungan dengan solusi yang rumit. Ilustrasinya sebagai berikut:

<h3>Table borders belong to cells, and aren't present if there is no cell</h3>
<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>


<h3>Simple solution, artificially insert empty cells</h3>

<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only<td><td>
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only<td>
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>