How to layout table cells, rows, and columns with JavaScript?

Javascript Object Oriented Programming Front End Technology

To layout tables correctly in JavaScript, use the tableLayout property. Set the property to fixed to set the layout.

Example

You can try to run the following code to set the way to layout table cells, rows, and columns with JavaScript −

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, td {
            border: 2px solid blue;
         }
         #myID {
            width: 100%;
         }
      </style>
   </head>
   <body>
      <button onclick = "display()">Set Layout Property</button>
      <table id = "myID">
         <tr>
            <td>This is a text for demo</td>
            <td>This is another text</td>
         </tr>
         <tr>
            <td>One</td>
            <td>1</td>
         </tr>
         <tr>
            <td>Two</td>
            <td>2</td>
         </tr>
         <tr>
            <td>Three</td>
            <td>3</td>
         </tr>
      </table>
      <script>
         function display() {
            document.getElementById("myID").style.tableLayout = "fixed";
         }
      </script>
   </body>
</html>

Abhinanda Shri

Published on 27-Feb-2018 07:23:00

Previous Page Print Page