กำหนดเส้นขอบให้กับแถวตาราง HTML <tr>

เป็นไปได้ไหมที่จะขอบแถวตาราง<tr>ในคราวเดียวแทนที่จะให้เส้นขอบกับแต่ละเซลล์<td>เช่น

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

สิ่งนี้ให้เส้นขอบรอบ ๆ ที่กำหนด<tr>แต่ต้องมีเส้นขอบรอบเซลล์แต่ละเซลล์

เราสามารถให้พรมแดน<tr>เพียงครั้งเดียวได้หรือไม่?

→ jsFiddle

คุณสามารถตั้งค่าborderคุณสมบัติของtrองค์ประกอบได้ แต่ตามข้อกำหนดของ CSS 2.1 คุณสมบัติดังกล่าวไม่มีผลในรูปแบบเส้นขอบที่แยกออกจากกันซึ่งมักจะเป็นค่าเริ่มต้นในเบราว์เซอร์ Ref .: 17.6.1 แยกรุ่นพรมแดน ( ค่าเริ่มต้นborder-collapseเป็นseparateไปตาม CSS 2.1 และเบราว์เซอร์บางตัวยังตั้งเป็นค่าเริ่มต้นสำหรับtableเอฟเฟกต์สุทธิคือคุณได้รับเส้นขอบที่แยกออกจากเบราว์เซอร์เกือบทั้งหมดเว้นแต่คุณจะระบุอย่างชัดเจนcollapse)

ดังนั้นคุณต้องใช้การยุบเส้นขอบ ตัวอย่าง:

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

อย่างแน่นอน! เพียงแค่ใช้

<tr style="outline: thin solid">

แถวไหนที่คุณชอบ นี่คือไวโอลิน

แน่นอนว่าตามที่ผู้คนกล่าวถึงคุณสามารถทำได้ผ่านทาง id หรือคลาสหรือวิธีอื่น ๆ หากต้องการ

ใช่. ฉันอัปเดตคำตอบของฉัน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;
}

หากคุณต้องการจัดสไตล์เพียงอย่างเดียว<tr>คุณสามารถทำได้ด้วยคลาส: การสาธิตครั้งที่สอง

ใช้ประโยชน์จากคลาส CSS:

tr.border{
    outline: thin solid;
}

และใช้มันเช่น:

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

คุณสามารถใช้คุณสมบัติ box-shadow บนองค์ประกอบ tr แทนเส้นขอบได้ ในทางบวกคุณสมบัติรัศมีขอบใด ๆ ในองค์ประกอบเดียวกันจะนำไปใช้กับเงาของกล่องด้วย

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

เซลล์ซ้าย:

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

มิดเซลล์:

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

เซลล์ด้านขวา:

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

เพิ่มระยะห่างชายแดน: 0rem 0.5rem; สร้างช่องว่างสำหรับแต่ละเซลล์ (td, th) รายการที่ด้านล่างโดยไม่เหลือช่องว่างระหว่างเซลล์

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

หลังจากต่อสู้กับสิ่งนี้มาเป็นเวลานานฉันได้ข้อสรุปว่าคำตอบง่ายๆที่น่าประทับใจคือเพียงเติมเซลล์ว่างในตารางเพื่อเติมทุกแถวของตารางให้มีจำนวนเซลล์เท่ากัน (โดยคำนึงถึง colspan ด้วย) ด้วย HTML ที่สร้างด้วยคอมพิวเตอร์สิ่งนี้ง่ายมากในการจัดเรียงและหลีกเลี่ยงการต่อสู้กับวิธีแก้ปัญหาที่ซับซ้อน ภาพประกอบดังนี้:

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