Tambahkan border-bottom ke baris tabel <tr>

Saya memiliki tabel 3 oleh 3. Saya perlu cara untuk menambahkan perbatasan untuk bagian bawah setiap baris trdan memberikan warna tertentu.

Pertama saya mencoba cara langsung, yaitu:

<tr style="border-bottom:1pt solid black;">

Tapi itu tidak berhasil. Jadi saya menambahkan CSS seperti ini:

tr {
border-bottom: 1pt solid black;
}

Itu masih tidak berhasil.

Saya lebih suka menggunakan CSS karena saya tidak perlu menambahkan styleatribut ke setiap baris. Saya belum menambahkan borderatribut ke <table>. Saya harap itu tidak mempengaruhi CSS saya.

Saya punya masalah seperti ini sebelumnya. Saya tidak berpikir trbisa mengambil gaya perbatasan secara langsung. Solusi saya adalah menata huruf tds di baris:

<tr class="border_bottom">

CSS:

tr.border_bottom td {
  border-bottom:1pt solid black;
}

Tambahkan border-collapse:collapseke aturan tabel Anda:

table { 
    border-collapse: collapse; 
}

Tautan

Gunakan di border-collapse:collapseatas meja dan border-bottom: 1pt solid black;di atas tr

Menggunakan

border-collapse:collapse sebagai Nathan menulis dan Anda perlu mengatur

td { border-bottom: 1px solid #000; }

Ada banyak jawaban yang tidak lengkap di sini. Karena Anda tidak dapat menerapkan batas pada trtag, Anda perlu menerapkannya pada tag tdatau thseperti:

td {
  border-bottom: 1pt solid black;
}

Melakukan hal ini akan menyisakan ruang kecil di antara masing-masing td, yang kemungkinan tidak diinginkan jika Anda ingin perbatasan muncul seolah-olah itu adalah trtag. Untuk "mengisi celah", Anda perlu memanfaatkan border-collapseproperti pada tableelemen dan menetapkan nilainya collapse, seperti:

table {
  border-collapse: collapse;
}

Menggunakan

table{border-collapse:collapse}
tr{border-top:thin solid}

Ganti "thin solid" dengan properti CSS.

Tampilkan baris sebagai blok.

tr {
    display: block;
    border-bottom: 1px solid #000;
}

dan untuk menampilkan warna alternatif hanya:

tr.oddrow {
    display: block;
    border-bottom: 1px solid #F00;
}

Anda bisa menggunakan box-shadowproperti untuk memalsukan batas trelemen. Sesuaikan posisi Y box-shadow(di bawah direpresentasikan sebagai 2px) untuk menyesuaikan ketebalan.

tr {
  -webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  -moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}

Saya mencoba menambahkan

    table {
      border-collapse: collapse;
    }   

di samping

    tr {
      bottom-border: 2pt solid #color;
    }

dan kemudian berkomentar keluar-runtuh perbatasan untuk melihat apa yang berhasil. Hanya memiliki pemilih tr dengan properti perbatasan bawah bekerja untuk saya!

Tidak ada Border CSS ex.

Tidak ada Foto Perbatasan

CSS Border ex.

Tabel dengan foto perbatasan langsung

Saya menemukan ketika menggunakan metode ini bahwa ruang antara elemen td menyebabkan celah terbentuk di perbatasan, tetapi tidak takut ...

Salah satu cara mengatasi ini:

<tr>
    <td>
        Example of normal table data
    </td>

    <td class="end" colspan="/* total number of columns in entire table*/">
        /* insert nothing in here */ 
    </td>
</tr>

Dengan CSS:

td.end{
    border:2px solid black;
}

<td style="border-bottom-style: solid; border-bottom: thick dotted #ff0000; ">

Anda dapat melakukan hal yang sama ke seluruh baris juga.

Ada border-bottom-style, border-top-style, border-left-style, border-right-style. Atau hanya border-styleitu berlaku untuk keempat perbatasan sekaligus.

Anda dapat melihat (dan COBA DIRI secara online) lebih detail di sini

Beberapa jawaban menarik. Karena Anda hanya menginginkan batas bawah (atau atas) di sini ada dua lagi. Dengan asumsi Anda ingin perbatasan biru tebal 3px. Di bagian gaya Anda dapat menambahkan

.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}

Dalam kode tabel juga

<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>

Solusi lain untuk ini adalah border-spacingproperti:

table td {
  border-bottom: 2px solid black;
}

table {
  border-spacing: 0px;
}

<table>
 <tr>
   <td>ABC</td>
   <td>XYZ</td>
</table>

Tidak ada batas bawah CSS:

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>

Anda tidak dapat menempatkan perbatasan pada elemen tr. Ini bekerja untuk saya di firefox dan IE 11:

<td style='border-bottom:1pt solid black'>

HTML

<tr class="bottom-border">
</tr>

CSS

tr.bottom-border {
  border-bottom: 1px solid #222;
}