How to Auto-Wrap Only Large Tables (Based on Column Count) Using jQuery
Last updated 3 weeks, 5 days ago | 34 views 75 5
First page link: How to Wrap Tables with a Div Element Using jQuery
Awesome!
Let’s now extend our jQuery solution to auto-wrap only large tables — for example, tables that have more than 5 columns.
This is super useful when you have many tables on a page but only want to wrap "wide" tables that really need scrolling or special styling.
Updated Step-by-Step Process
-
Select all tables on the page.
-
Check the number of columns in each table.
-
Wrap only those tables where the number of columns exceeds a threshold (e.g., 5).
✅ Updated jQuery Code
$(document).ready(function(){
$("table").each(function(){
var columnCount = $(this).find('tr:first-child td, tr:first-child th').length;
if (columnCount > 5) {
if (!$(this).parent().hasClass('table-wrapper')) { // Prevent double wrapping
$(this).wrap("<div class='table-wrapper'></div>");
}
}
});
});
Explanation:
-
$("table").each(function(){})→ Loops through all tables on the page. -
.find('tr:first-child td, tr:first-child th')→ Counts the number of<td>or<th>elements in the first row (it could be<td>or<th>depending on the table structure). -
if (columnCount > 5)→ Only wraps the table if it has more than 5 columns. -
!$(this).parent().hasClass('table-wrapper')→ Checks if the table is already wrapped to avoid double wrapping.
Full HTML + jQuery Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Auto-Wrap Large Tables with jQuery</title>
<style>
.table-wrapper {
overflow-x: auto;
max-width: 100%;
border: 2px solid #ccc;
margin: 20px 0;
padding: 10px;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #aaa;
padding: 8px 12px;
text-align: left;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>Small Table (Not Wrapped)</h2>
<table>
<tr><th>Name</th><th>Age</th><th>City</th></tr>
<tr><td>John</td><td>25</td><td>New York</td></tr>
<tr><td>Jane</td><td>30</td><td>Los Angeles</td></tr>
</table>
<h2>Large Table (Auto-Wrapped)</h2>
<table>
<tr>
<th>Product</th><th>Price</th><th>Stock</th><th>SKU</th><th>Category</th><th>Brand</th>
</tr>
<tr>
<td>Phone</td><td>$699</td><td>Available</td><td>PH1234</td><td>Electronics</td><td>Samsung</td>
</tr>
<tr>
<td>Laptop</td><td>$999</td><td>Available</td><td>LT5678</td><td>Electronics</td><td>Dell</td>
</tr>
</table>
<script>
$(document).ready(function(){
$("table").each(function(){
var columnCount = $(this).find('tr:first-child td, tr:first-child th').length;
if (columnCount > 5) {
if (!$(this).parent().hasClass('table-wrapper')) {
$(this).wrap("<div class='table-wrapper'></div>");
}
}
});
});
</script>
</body>
</html>
Bonus Tips:
-
Customize the Column Threshold:
If you want to change the rule, just adjustif (columnCount > 5).
For example,if (columnCount > 4)to wrap tables with more than 4 columns. -
Multiple Table Styles:
You can apply different wrapper classes for small and large tables if needed. -
Better Mobile Experience:
Addingoverflow-x: autoensures users can scroll horizontally on mobile devices.
Common Pitfalls
-
Incorrect Column Counting:
Always select both<th>and<td>elements in the first row, or some tables might be missed. -
Double-Wrapping Tables:
Always check if the table is already inside a wrapper before wrapping it again. -
Timing Issues:
If your tables are dynamically added after the page loads (e.g., through AJAX), you’ll need to run this wrapping code again manually after adding the tables.
Conclusion
Using this smart auto-wrap technique, you can ensure that only wide tables are wrapped inside a scrollable div, keeping your web pages clean, professional, and user-friendly!
It’s a small touch — but it massively improves mobile usability, responsiveness, and readability.
See an even cooler advanced version where the wrapper div is added with a "Scroll to view" label above large tables
Click here
