เพิ่มเส้นขอบด้านล่างลงในแถวตาราง <tr>

ฉันมีตารางขนาด 3 คูณ 3 ฉันต้องการวิธีเพิ่มเส้นขอบที่ด้านล่างของทุกแถวtrและให้สีเฉพาะ

ก่อนอื่นฉันลองวิธีที่ตรงคือ:

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

แต่นั่นไม่ได้ผล ดังนั้นฉันจึงเพิ่ม CSS เช่นนี้:

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

ยังไม่ได้ผล

ฉันต้องการใช้ CSS เพราะฉันไม่ต้องการเพิ่มstyleคุณสมบัติให้กับทุกแถว ฉันยังไม่ได้เพิ่มแอตทริบิวต์ไปborder <table>ฉันหวังว่านั่นจะไม่ส่งผลกระทบต่อ CSS ของฉัน

ฉันมีปัญหาแบบนี้มาก่อน ฉันไม่คิดว่าtrจะสามารถจัดแต่งทรงผมที่ขอบได้โดยตรง วิธีแก้ปัญหาของฉันคือการจัดรูปแบบtdแถวใน:

<tr class="border_bottom">

CSS:

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

เพิ่มborder-collapse:collapseในตารางกฎของคุณ:

table { 
    border-collapse: collapse; 
}

ลิงค์

ใช้border-collapse:collapseบนโต๊ะและborder-bottom: 1pt solid black;บน tr

ใช้

border-collapse:collapse ในฐานะที่นาธานเขียนและคุณต้องตั้งค่า

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

มีคำตอบที่ไม่สมบูรณ์จำนวนมากที่นี่ เนื่องจากคุณไม่สามารถใช้เส้นขอบกับtrแท็กคุณจึงต้องใช้มันกับtdหรือthแท็กดังนี้:

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

การทำเช่นนี้จะทำให้มีช่องว่างเล็ก ๆ ระหว่างแต่ละtdอันซึ่งไม่น่าจะเป็นที่ต้องการหากคุณต้องการให้เส้นขอบปรากฏขึ้นราวกับเป็นtrแท็ก ในการที่จะ "เติมช่องว่าง" เพื่อพูดคุณจำเป็นต้องใช้border-collapseคุณสมบัติในtableองค์ประกอบและตั้งค่าเป็นcollapseดังนี้:

table {
  border-collapse: collapse;
}

ใช้

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

แทนที่ "thin solid" ด้วยคุณสมบัติ CSS

แสดงแถวเป็นบล็อก

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

และเพื่อแสดงสีอื่น ๆ เพียง:

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

คุณสามารถใช้box-shadowคุณสมบัตินี้เพื่อปลอมเส้นขอบของtrองค์ประกอบ ปรับตำแหน่ง Y ของbox-shadow(ด้านล่างแทนด้วย 2px) เพื่อปรับความหนา

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

ฉันพยายามเพิ่ม

    table {
      border-collapse: collapse;
    }   

ข้างๆ

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

จากนั้นแสดงความคิดเห็นเกี่ยวกับการยุบเขตแดน เพียงแค่ให้ตัวเลือก tr กับคุณสมบัติด้านล่างใช้งานได้สำหรับฉัน!

ไม่มี CSS ชายแดน

ไม่มีภาพถ่ายเส้นขอบ

CSS ชายแดนเช่น

ตารางถ่ายภาพแนวชายแดนสด

ฉันพบเมื่อใช้วิธีนี้ว่าช่องว่างระหว่างองค์ประกอบ td ทำให้เกิดช่องว่างในแบบฟอร์มชายแดน แต่ไม่ต้องกลัว ...

วิธีหนึ่งในการนี้:

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

ด้วย CSS:

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

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

คุณสามารถทำเช่นเดียวกันกับทั้งแถวได้เช่นกัน

นอกจากนี้border-bottom-style, border-top-style, ,border-left-style border-right-styleหรือเพียงแค่border-styleนำไปใช้กับทั้งสี่ชายแดนในครั้งเดียว

คุณสามารถดู (และทดลองด้วยตัวเองทางออนไลน์) รายละเอียดเพิ่มเติมได้ที่นี่

คำตอบที่น่าสนใจหลายประการ เนื่องจากคุณต้องการเส้นขอบด้านล่าง (หรือด้านบน) ที่นี่มีอีกสอง สมมติว่าคุณต้องการเส้นขอบสีน้ำเงินหนา 3px ในส่วนสไตล์ที่คุณสามารถเพิ่ม

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

ในรหัสตารางอย่างใดอย่างหนึ่ง

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

วิธีแก้ปัญหานี้ก็คือborder-spacingคุณสมบัติ:

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

table {
  border-spacing: 0px;
}

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

ไม่มี CSS ชายแดนด้านล่าง:

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

คุณไม่สามารถใส่เส้นขอบบนองค์ประกอบ tr ได้ สิ่งนี้ใช้ได้กับฉันใน firefox และ IE 11:

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

HTML

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

CSS

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