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
In dynamic fashion setting a custom class to a cell in a row
If you need to set CSS properties for a row, you can combine the predefined CSS class of the table along with your custom class. This allows you to apply specific styling to table cells dynamically.
Syntax
.table-class .custom-class {
property: value;
}
Example: Custom Cell Styling
The following example demonstrates how to apply custom styling to table cells using a combination of table class and custom class −
<!DOCTYPE html>
<html>
<head>
<style>
.data-table {
border-collapse: collapse;
width: 100%;
}
.data-table th,
.data-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.data-table .highlight-cell {
background-color: #4CAF50;
color: #ffffff;
font-weight: bold;
margin: 10px;
}
.data-table .warning-cell {
background-color: #ff9800;
color: #ffffff;
}
</style>
</head>
<body>
<table class="data-table">
<tr>
<th>Name</th>
<th>Status</th>
<th>Priority</th>
</tr>
<tr>
<td>John Doe</td>
<td class="highlight-cell">Active</td>
<td>High</td>
</tr>
<tr>
<td>Jane Smith</td>
<td class="warning-cell">Pending</td>
<td>Medium</td>
</tr>
</table>
</body>
</html>
A table with three columns appears. The "Active" cell has a green background with white text and bold formatting. The "Pending" cell has an orange background with white text. Other cells have standard table styling.
Dynamic Class Application
You can also apply custom classes dynamically using JavaScript based on data conditions −
<!DOCTYPE html>
<html>
<head>
<style>
.sapMListTbl .priority-high {
background-color: #f44336;
color: #ffffff;
font-weight: bold;
}
.sapMListTbl .priority-low {
background-color: #2196F3;
color: #ffffff;
}
.sapMListTbl td {
padding: 10px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<table class="sapMListTbl">
<tr>
<td>Task 1</td>
<td class="priority-high">High Priority</td>
</tr>
<tr>
<td>Task 2</td>
<td class="priority-low">Low Priority</td>
</tr>
</table>
</body>
</html>
A table showing two tasks with priority cells. The "High Priority" cell has a red background with white text, while the "Low Priority" cell has a blue background with white text.
Conclusion
Using predefined table classes combined with custom classes provides flexibility for dynamic styling. This approach allows you to maintain consistent table structure while applying specific formatting to individual cells based on data conditions.
Updated on: 2026-03-15T11:13:49+05:30
180 Views
Advertisements