คุณสมบัติ HTML DOM Style emptyCells

คุณสมบัติ HTML DOM Style emptyCells ใช้สำหรับระบุวิธีการแสดงเซลล์ว่างของตาราง โดยค่าเริ่มต้นจะตั้งเป็น show

ไวยากรณ์ (Syntax)

การตั้งค่าคุณสมบัติ emptyCells:

empty-cells: show|hide|initial|inherit;

ที่นี่ "show" จะแสดงขอบของเซลล์ว่าง ในขณะที่ "hide" จะไม่แสดง "initial" ตั้งค่าเป็นค่าเริ่มต้น และ "inherit" สืบทอดค่าจากพาเรนต์

ตัวอย่างการใช้งาน

<!DOCTYPE html> <html> <head> <style> 
    #TABLE1 { 
        font-style: italic; 
        empty-cells: hide; 
    } 
    table, td { 
        margin: 5px; 
        padding: 3px; 
        border: 1px solid black; 
    } 
</style> <script> 
    function showEmptyCells() { 
        document.getElementById("TABLE1").style.emptyCells = "show"; 
        document.getElementById("Sample").innerHTML = "เซลล์ว่างของตารางจะมองเห็นได้แล้ว"; 
    } 
</script> </head> <body> 
    <table id="TABLE1"> 
        <tr> 
            <td>demo</td> 
            <td></td> 
            <td></td> 
        </tr> 
        <tr> 
            <td>demo</td> 
            <td></td> 
            <td></td> 
        </tr> 
        <tr> 
            <td>demo</td> 
            <td></td> 
            <td></td> 
        </tr> 
    </table> 
    <p>คลิกปุ่มด้านล่างเพื่อแสดงเซลล์ที่ซ่อนอยู่ของตารางด้านบน</p> 
    <button onclick="showEmptyCells()">แสดงเซลล์</button> 
    <p id="Sample"></p> 
</body> </html>

ผลลัพธ์

เมื่อคลิกปุ่ม "แสดงเซลล์":