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

JavascriptObject Oriented ProgrammingFront 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>
raja
Published on 27-Feb-2018 07:23:00
Advertisements