code test
NLGI Certified Products
| Company | Product | Product Type |
|---|---|---|
| BATTENFELD GREASE & OIL CORP, OF NY | BATTENFELD GREASE B #1 | GC |
| LUBRICANTES DE AMERICA, S.A. DE C.V. | JOHN DEERE GRASA COTTON PICKER | GC |
View of code
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>NLGI Certified Products</title>
<style>
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h2 {
text-align: center;
}
/* Table Container for Scrollability */
.table-container {
width: 100%;
overflow-x: auto;
}
/* Table Styling */
table {
width: 100%;
border-collapse: collapse;
border: 1px solid #ddd;
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
/* Fix for Table Header Alignment */
th {
background-color: #007bff;
color: white;
white-space: normal; /* Allow text wrapping */
word-break: break-word; /* Force breaking if needed */
}
/* Zebra Striping for Readability */
tr:nth-child(even) {
background-color: #f8f9fa;
}
/* Responsive Table: Stack on Small Screens */
@media (max-width: 768px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead {
display: none; /* Hide headers on small screens */
}
tr {
margin-bottom: 10px;
border: 1px solid #ddd;
padding: 10px;
}
td {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ddd;
padding: 8px;
}
td::before {
content: attr(data-label); /* Adds labels dynamically */
font-weight: bold;
}
}
</style>
</head>
<body>
<h2>NLGI Certified Products</h2>
<div class=”table-container”>
<table>
<thead>
<tr>
<th>Company</th>
<th>Product</th>
<th>Product Type</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label=”Company”>BATTENFELD GREASE & OIL CORP, OF NY</td>
<td data-label=”Product”>BATTENFELD GREASE B #1</td>
<td data-label=”Type”>GC</td>
</tr>
<tr>
<td data-label=”Company”>LUBRICANTES DE AMERICA, S.A. DE C.V.</td>
<td data-label=”Product”>JOHN DEERE GRASA COTTON PICKER</td>
<td data-label=”Type”>GC</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>