Collapse the table border:
document.getElementById("myTable").style.borderCollapse = "collapse";
<!DOCTYPE html> <html> <body> <table id="myTable" border="1"> <caption id="myCaption">Monthly Salary</caption> <tr> <th>Item</th> <th>Savings</th> </tr> <tr> <td>CSS</td> <td>$100</td> </tr> <tr> <td>HTML</td> <td>$50</td> </tr> </table>/*w ww . j av a 2 s . co m*/ <br> <button type="button" onclick="myFunction()">Collapse border</button> <script> function myFunction() { document.getElementById("myTable").style.borderCollapse = "collapse"; } </script> </body> </html>
The borderCollapse property sets or gets whether the table border should be collapsed into a single border.
Property Values
Value | Description |
---|---|
separate | Separate borders are drawn for all table cell elements. Default |
collapse | Borders are not drawn between table cell elements |
initial | Sets this property to its default value. |
inherit | Inherits this property from its parent element. |
The borderCollapse property returns a String representing the borders of a table.