การกำหนดสีของเส้นตารางแต่ละด้าน

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
fonfonn
PHP VIP Members
PHP VIP Members
โพสต์: 4983
ลงทะเบียนเมื่อ: 11/07/2022 9:28 am

การกำหนดสีของเส้นตารางแต่ละด้าน

โพสต์ที่ยังไม่ได้อ่าน โดย fonfonn »

จากบทความการการสร้างตารางโดยใช้ class ของ Booststap ซึ่งในการสร้างตารางหรือช่องนั้นเราสามารถกำหนดให้เส้นแสดงหรือไม่แสดงได้ หรือกำหนดลักษณะเส้น แต่ละด้านให้มีความแตกต่างกันได้ แม้เป็นช่องหรือคอลัมนืเดียวกัน ในบทความนี้จึงจะขออธิบายเพิ่มเติมในส่วนของการจัดการเส้นแต่ละด้าน โดยจะทำการอธิบายตามโค้ดด้านล่างนี้
โค้ดทั้งหมด

โค้ด: เลือกทั้งหมด

<HTML>
    <HEAD>
        <TITLE> mdsoft_html_trial_balance_print </TITLE>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </HEAD>
    <body>
        <center>
            <br>
        <div class="row" style="width: 90%">
            <div style="border-bottom:solid 1px rgb(0, 0, 0); 
            border-top:solid 1px rgb(55, 10, 255); 
            border-right:solid 1px rgb(255, 0, 0);
            border-left:solid 1px rgb(6, 250, 27);">
            ตัวอย่างช่อง
            </div>
        </div>
        </center>
    </body>
</HTML>
จากโค้ด เราจะใช้วิธีการกำหนดลักษณะเส้นของเส้นแต่ละด้าน ด้วยการกำหนด เส้นซ้าย ขวา บน ล่าง จากตัวอย่างตามโค้ด สามาถอธิบายได้ดังนี้
  • โค้ด: เลือกทั้งหมด

    border-bottom:solid 1px rgb(0, 0, 0); 
    ส่วนนนี้เป็นการกำหนดให้เส้นด้านล่าง หรือ border-bottom เป็นสีดำ
  • โค้ด: เลือกทั้งหมด

    border-top:solid 1px rgb(55, 10, 255);
    ส่วนนนี้เป็นการกำหนดให้เส้นด้านบน หรือ border-top เป็นสีน้ำเงิน
  • โค้ด: เลือกทั้งหมด

    border-right:solid 1px rgb(255, 0, 0);
    ส่วนนนี้เป็นการกำหนดให้เส้นด้านขวา หรือ border-right เป็นสีแดง
  • โค้ด: เลือกทั้งหมด

    border-left:solid 1px rgb(6, 250, 27);
    ส่วนนนี้เป็นการกำหนดให้เส้นด้านซ้าย หรือ border-left เป็นสีเขียว
  • ผลลัพธ์ที่ได้
    Booststap Knowledge-1.png
    Booststap Knowledge-1.png (3 KiB) Viewed 685 times
จากการทำงานจะเห็นได้ว่า ภายใต้แท็ก HTML เราสามารถกำหนดให้เส้นแต่ละด้านมีความแตกต่างกันออกไปได้แม้จะเป็นช่องเดียวกัน เหมือนในตัวอย่าง เรากำหนให้เส้น ซ้ายขวาบนล่างมีสีที่ต่างกัน นอกจากนี้เรายังนำการกำหนดลักษณะเส้น มาใช้ร่วมมกับวิธีการนี้ได้ เช่นต้องการ ทำให้ได้ซ้ายเป็น เส้นปะสีแดงก็จะใช้โค้ด ว่า border-left: dashed 1px rgb(255, 0, 0); เป็นต้น
you're the only one treasure💎

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: Google Adsense [Bot] และบุคลทั่วไป 75