在网页下面，再搞一个类似的表，但是要11列内容

index.html

@@ -118,10 +118,55 @@
                 </div>
             </section>
         </main>
+            <!-- Extended Table Section -->
+            <section class="mt-12 bg-white rounded-xl shadow-md overflow-hidden">
+                <div class="p-6 border-b border-gray-200">
+                    <h2 class="text-xl font-semibold text-gray-800 flex items-center">
+                        <i data-feather="list" class="mr-2 text-indigo-500"></i>
+                        Detailed Sensor Data
+                    </h2>
+                    <p class="text-gray-500 mt-1">Comprehensive sensor readings with additional metrics</p>
+                </div>
+                <div class="overflow-x-auto max-h-96 overflow-y-auto">
+                    <table class="min-w-full divide-y divide-gray-200 sticky-header">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sensor ID</th>
+                                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th>
+                                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
+                                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th>
+                                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Unit</th>
+                                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Min</th>
+                                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Max</th>
+                                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avg</th>
+                                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Calibration</th>
+                                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Next Calibration</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white divide-y divide-gray-200" id="detailedTable">
+                            <!-- Table rows will be populated by JavaScript -->
+                        </tbody>
+                    </table>
+                </div>
+                <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex items-center justify-between">
+                    <div class="text-sm text-gray-500">
+                        Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">24</span> sensors
+                    </div>
+                    <div class="flex space-x-2">
+                        <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
+                            Previous
+                        </button>
+                        <button class="px-3 py-1 border border-indigo-500 rounded-md text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
+                            Next
+                        </button>
+                    </div>
+                </div>
+            </section>
 
         <!-- Footer -->
         <footer class="bg-gray-800 text-white py-6">
-            <div class="container mx-auto px-4">
+<div class="container mx-auto px-4">
                 <div class="flex flex-col md:flex-row justify-between items-center">
                     <div class="mb-4 md:mb-0">
                         <p class="text-gray-300">© 2023 Faulty Whistle Monitoring System</p>

script.js

@@ -154,4 +154,53 @@ document.addEventListener('DOMContentLoaded', function() {
         
         tableBody.appendChild(row);
     });
-});
+
+    // Populate detailed table with sample data
+    const detailedData = [
+        { id: 'S-001', location: 'Engine Bay', type: 'Temperature', value: '28.5', unit: '°C', min: '10', max: '35', avg: '25.2', status: 'normal', lastCalibration: '2023-05-15', nextCalibration: '2023-08-15' },
+        { id: 'S-002', location: 'Hydraulic System', type: 'Pressure', value: '8.2', unit: 'bar', min: '5', max: '10', avg: '7.8', status: 'normal', lastCalibration: '2023-04-20', nextCalibration: '2023-07-20' },
+        { id: 'S-003', location: 'Wheel Assembly', type: 'Vibration', value: '0.42', unit: 'mm/s', min: '0.1', max: '0.5', avg: '0.38', status: 'warning', lastCalibration: '2023-03-10', nextCalibration: '2023-06-10' },
+        { id: 'S-004', location: 'Cabin', type: 'Humidity', value: '65', unit: '%', min: '30', max: '70', avg: '58', status: 'normal', lastCalibration: '2023-06-01', nextCalibration: '2023-09-01' },
+        { id: 'S-005', location: 'Fuel Tank', type: 'Level', value: '78', unit: '%', min: '10', max: '100', avg: '72', status: 'normal', lastCalibration: '2023-05-25', nextCalibration: '2023-08-25' },
+        { id: 'S-006', location: 'Brake System', type: 'Temperature', value: '95', unit: '°C', min: '20', max: '80', avg: '65', status: 'critical', lastCalibration: '2023-04-15', nextCalibration: '2023-07-15' },
+        { id: 'S-007', location: 'Battery', type: 'Voltage', value: '24.3', unit: 'V', min: '22', max: '26', avg: '24.1', status: 'normal', lastCalibration: '2023-06-05', nextCalibration: '2023-09-05' },
+        { id: 'S-008', location: 'Coolant System', type: 'Flow Rate', value: '12.5', unit: 'L/min', min: '10', max: '15', avg: '12.8', status: 'normal', lastCalibration: '2023-05-10', nextCalibration: '2023-08-10' },
+        { id: 'S-009', location: 'Exhaust', type: 'Temperature', value: '320', unit: '°C', min: '200', max: '350', avg: '280', status: 'normal', lastCalibration: '2023-04-25', nextCalibration: '2023-07-25' },
+        { id: 'S-010', location: 'Air Intake', type: 'Pressure', value: '1.02', unit: 'bar', min: '0.95', max: '1.05', avg: '1.01', status: 'normal', lastCalibration: '2023-06-10', nextCalibration: '2023-09-10' }
+    ];
+    
+    const detailedTableBody = document.getElementById('detailedTable');
+    
+    detailedData.forEach(item => {
+        const row = document.createElement('tr');
+        
+        let statusClass = 'status-warning';
+        let statusText = 'Warning';
+        if (item.status === 'normal') {
+            statusClass = 'status-normal';
+            statusText = 'Normal';
+        } else if (item.status === 'critical') {
+            statusClass = 'status-critical';
+            statusText = 'Critical';
+        }
+        
+        row.innerHTML = `
+            <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${item.id}</td>
+            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">${item.location}</td>
+            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">${item.type}</td>
+            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 font-semibold">${item.value}</td>
+            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">${item.unit}</td>
+            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">${item.min}${item.unit}</td>
+            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">${item.max}${item.unit}</td>
+            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">${item.avg}${item.unit}</td>
+            <td class="px-4 py-4 whitespace-nowrap">
+                <span class="${statusClass}">${statusText}</span>
+            </td>
+            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">${item.lastCalibration}</td>
+            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">${item.nextCalibration}</td>
+        `;
+        
+        detailedTableBody.appendChild(row);
+    });
+});
+