Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
With JavaScript how to change the width of a table border?
To change the width of a table border in JavaScript, use the DOM border property or the more specific borderWidth property. This allows you to dynamically modify table borders after the page loads.
Syntax
element.style.border = "width style color"; element.style.borderWidth = "width";
Example: Changing Table Border Width
<!DOCTYPE html>
<html>
<head>
<script>
function borderFunc(x) {
document.getElementById(x).style.border = "5px dashed blue";
}
</script>
</head>
<body>
<table style="border: 2px solid black" id="newtable">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
</table>
<p>
<input type="button" onclick="borderFunc('newtable')" value="Change Border Width">
</p>
</body>
</html>
Using borderWidth Property
For more precise control, you can use the borderWidth property to change only the width while preserving existing style and color:
<!DOCTYPE html>
<html>
<head>
<script>
function changeBorderWidth() {
const table = document.getElementById("myTable");
table.style.borderWidth = "8px";
}
</script>
</head>
<body>
<table style="border: 3px solid red" id="myTable">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
<button onclick="changeBorderWidth()">Change Border Width Only</button>
</body>
</html>
Comparison
| Property | Effect | Use Case |
|---|---|---|
border |
Changes width, style, and color | Complete border makeover |
borderWidth |
Changes width only | Preserve existing style and color |
Key Points
- Use
getElementById()to target specific tables - The
borderproperty accepts values like "5px solid blue" - Changes take effect immediately when the function executes
- You can use CSS units like px, em, rem for border width
Conclusion
Use the style.border property for complete border changes or style.borderWidth to modify only the thickness. Both methods provide dynamic control over table appearance through JavaScript.
Updated on: 2026-03-15T23:18:59+05:30
1K+ Views
Advertisements