HTML DOM Style tableLayout प्रॉपर्टी

परिचय

HTML DOM Style tableLayout प्रॉपर्टी HTML दस्तावेज़ में टेबल सेल्स, पंक्तियों और कॉलम को कैसे लेआउट किया जाए, यह निर्धारित करती है। यह टेबल रेंडरिंग एल्गोरिदम को नियंत्रित करती है।

सिंटैक्स

1. tableLayout मान प्राप्त करना

object.style.tableLayout

2. tableLayout मान सेट करना

object.style.tableLayout = "value"

मान

उदाहरण

इस उदाहरण में, एक टेबल पर डिफ़ॉल्ट auto लेआउट है। जब "Set tableLayout" बटन पर क्लिक किया जाता है, तो tableLayout: "fixed" सेट किया जाता है, जिससे कॉलम समान चौड़ाई के हो जाते हैं।

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    background: lightblue;
    height: 100vh;
    text-align: center;
    font-family: Arial, sans-serif;
    padding: 20px;
  }
  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;
  }
  th, td {
    border: 1px solid #333;
    padding: 8px;
  }
</style>
<body>
<h1>DOM Style tableLayout प्रॉपर्टी डेमो</h1>
<table border="2">
  <caption>छात्र विवरण</caption>
  <tr>
    <th>नाम</th>
    <th>रोल नं.</th>
  </tr>
  <tr>
    <td>जॉन</td>
    <td>031717</td>
  </tr>
  <tr>
    <td>एलन</td>
    <td>041717</td>
  </tr>
</table>
<button onclick="setTableLayout()" class="btn">Table Layout सेट करें</button>
<script>
  function setTableLayout() {
    document.querySelector('table').style.tableLayout = "fixed";
  }
</script>
</body>
</html>

आउटपुट

शुरुआत में कॉलम कंटेंट की चौड़ाई के अनुसार एडजस्ट होते हैं (auto)। "Table Layout सेट करें" बटन पर क्लिक करने पर, कॉलम टेबल चौड़ाई के आधार पर समान रूप से विभाजित हो जाते हैं (fixed)।

fixed vs auto तुलना

ब्राउज़र समर्थन

सभी ब्राउज़रों में पूर्ण समर्थन।