คุณสมบัติ tableLayout ของ Style ใน HTML DOM

คุณสมบัติ tableLayout ของ HTML DOM Style ใช้สำหรับคืนค่าและแก้ไขวิธีที่เซลล์ แถว และคอลัมน์ของตารางถูกวางออกในเอกสาร HTML

ไวยากรณ์

1. การคืนค่า tableLayout

object.tableLayout

2. การแก้ไข tableLayout

object.tableLayout = "value"

ที่นี่ value สามารถเป็นได้ดังนี้:

ตัวอย่าง

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    background: lightblue;
    height: 100vh;
    text-align: center;
  }
  table {
    margin: 2rem auto;
    width: 400px;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem auto;
  }
</style>
<body>
<h1>ตัวอย่างคุณสมบัติ Style tableLayout ของ DOM</h1>
<table border="2">
  <caption>ข้อมูลนักเรียน</caption>
  <tr>
    <th>ชื่อ</th>
    <th>เลขที่</th>
  </tr>
  <tr>
    <td>John</td>
    <td>031717</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>041717</td>
  </tr>
</table>
<button onclick="show()" class="btn">ตั้งค่า tableLayout</button>
<script>
  function show() {
    document.querySelector('table').style.tableLayout = "fixed";
  }
</script>
</body>
</html>

ผลลัพธ์

คลิกปุ่ม "ตั้งค่า tableLayout" เพื่อตั้งค่า tableLayout ด้วยค่า fixed