How to set the space between cells in a table with JavaScript?

JavascriptWeb DevelopmentFront End Scripts

To set the space between cells in a table with JavaScript, use the borderSpacing property. Set the spacing using this property.

Example

You can try to run the following code to learn how to set the space between table cells −

Live Demo

<!DOCTYPE html>
<html>
   <body>
      <table id="newTable" border="2">
         <tr>
            <th>EmpID</th>
            <th>EmpName</th>
            <th>EmpDept</th>
         </tr>
         <tr>
            <td>001</td>
            <td>Amit</td>
            <td>IT</td>
         </tr>
         <tr>
            <td>002</td>
            <td>John</td>
            <td>Finance</td>
         </tr>
         <tr>
             <td>003</td>
             <td>David</td>
             <td>Marketing</td>
         </tr>
      </table>
      <br>
      <button onclick="display()">Click to set space between cells</button>
      <script>
         function display() {
            document.getElementById("newTable").style.borderSpacing = "15px";
         }
      </script>
   </body>
</html>
raja
Published on 27-Feb-2018 10:06:07
Advertisements