Responsive Table

Okay, here are the HTML and CSS files to make your table responsive for mobile devices. Responsive Table

	DevOps Managed Services _{(Outsourcing)}	In-house DevOps Team _{(Hiring / Outstaffing)}
Initial Investment (avg.)	$0 - $40,000 One-time fixed payment	$20,000 to $30,000
Monthly Cost Team (avg.)	$2,000 to $6,000	$10,000 to $12,5000
Expertise & Experience	High – Access to certified engineers	Variable – Depends on internal hires
Operational Support	24/7 monitoring, proactive issue resolution	Limited to internal resources
Scalability	Easily scalable	Needs significant recruiting & training resources
Investment in Talent	Low/None	Significant
Total Cost (TCO 1 Year)	$70,000 - $110,000	$120,000 - $180,000

/* General Table Styles */ .table-modern { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.9em; font-family: sans-serif; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); } .table-modern thead.top tr { background-color: #009879; color: #ffffff; text-align: left; } .table-modern th, .table-modern td { padding: 12px 15px; border: 1px solid #dddddd; } .table-modern tbody tr { border-bottom: 1px solid #dddddd; } .table-modern tbody tr:nth-of-type(even) { background-color: #f3f3f3; } .table-modern tbody tr:last-of-type { border-bottom: 2px solid #009879; } .table-modern .row-title { font-weight: bold; background-color: #f8f8f8; } .table-modern .total td { font-weight: bold; background-color: #e0f2f1; /* Light green background for total */ } .table-modern .total .gr { color: #00796b; /* Darker green text for total values */ } .table-modern a { color: #007bff; text-decoration: none; } .table-modern a:hover { text-decoration: underline; } .table-modern sub { font-size: 0.8em; color: #e0e0e0; /* Lighter color for subtext in header */ } .table-modern thead.top th:first-child { /* Hide the first empty header cell visually but keep for structure */ color: #009879; background-color: #009879; } /* Mobile Styles */ @media (max-width: 768px) { .table-modern { box-shadow: none; /* Remove shadow on mobile */ border: 0; /* Remove main table border */ } .table-modern thead.top { display: none; /* Hide the original header */ } .table-modern tr { display: block; margin-bottom: 15px; border: 1px solid #ddd; /* Add border around each "card" */ box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Add shadow to each card */ } .table-modern tr:last-of-type { margin-bottom: 0; } .table-modern td { display: block; text-align: right; /* Align content to the right */ padding-left: 50%; /* Make space for the label */ position: relative; border: none; /* Remove individual cell borders */ border-bottom: 1px solid #eee; /* Add separator between cells */ } .table-modern td:last-child { border-bottom: 0; /* Remove border for the last cell in a card */ } .table-modern td.row-title { /* Style the row title differently on mobile */ text-align: center; padding: 10px 15px; font-weight: bold; background-color: #f8f8f8; width: 100%; /* Ensure it takes full width */ box-sizing: border-box; /* Include padding in width */ border-bottom: 2px solid #ccc; /* Stronger separator */ } .table-modern td:not(.row-title)::before { /* Add the label using the data-label attribute */ content: attr(data-label); position: absolute; left: 10px; width: calc(50% - 20px); /* Adjust width considering padding */ padding-right: 10px; white-space: normal; /* Allow label text to wrap */ text-align: left; font-weight: bold; color: #555; } .table-modern .total td { background-color: inherit; /* Reset background for total row cells */ } .table-modern .total td.row-title { background-color: #e0f2f1; /* Keep special background for total title */ border-bottom: 2px solid #009879; } .table-modern .total td.gr { font-weight: bold; color: #00796b; } .table-modern .total td.gr::before { font-weight: bold; /* Ensure label is also bold */ color: #555; /* Keep label color consistent */ } .table-modern td br { display: none; /* Hide line breaks within cells on mobile if needed */ } .table-modern td a { display: block; /* Make link take full width below text */ margin-top: 5px; } } This setup includes: 1. `index.html`: Your table structure with added `data-label` attributes to the `` elements (excluding the row title cells). These labels match the corresponding column headers. 2. `style.css`: * Basic desktop styling for the table. * A media query (`@media (max-width: 768px)`) that triggers the mobile styles. * Inside the media query: * The table header (`thead`) is hidden. * Each table row (`tr`) is displayed as a block, creating a card-like appearance. * Each table cell (`td`) is displayed as a block. * The `::before` pseudo-element on `td` elements (except the row title) uses `content: attr(data-label);` to display the header text as a label on the left side of the cell content. * Adjusted padding, alignment, and borders for a better mobile layout. * The first cell in each row (`.row-title`) is styled as a header for the card.