Alloy Tables with Tabs body { font-family: Arial, sans-serif; padding: 20px; } .tabs { display: flex; flex-wrap: wrap; margin-bottom: 10px; } .tab-button { padding: 10px 20px; border: 1px solid #ccc; cursor: pointer; background-color: #f9f9f9; margin-right: 5px; border-radius: 5px 5px 0 0; } .tab-button.active { background-color: #007BFF; color: #fff; } .tab-content { display: none; border: 1px solid #ccc; border-top: none; padding: 10px; } .tab-content.active { display: block; } .table-container { overflow-x: auto; } table { width: 100%; border-collapse: collapse; min-width: 700px; } th, td { padding: 10px 15px; border: 1px solid #ccc; text-align: left; } th { background-color: #f4f4f4; } a { color: #007BFF; text-decoration: none; } a:hover { text-decoration: underline; } @media (max-width: 600px) { table, thead, tbody, th, td, tr { display: block; } td { border: none; border-bottom: 1px solid #eee; padding: 8px; } th { display: none; } } function openTab(tabId) { const tabs = document.querySelectorAll(‘.tab-content’); const buttons = document.querySelectorAll(‘.tab-button’); tabs.forEach(tab => tab.classList.remove(‘active’)); buttons.forEach(btn => btn.classList.remove(‘active’)); document.getElementById(tabId).classList.add(‘active’); event.target.classList.add(‘active’); }

body {
font-family: Arial, sans-serif;
padding: 20px;
}
.table-container {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
min-width: 700px;
}
th, td {
padding: 10px 15px;
border: 1px solid #ccc;
text-align: left;
}
th {
background-color: #f4f4f4;
}
a {
color: #007BFF;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
position: sticky;
top: 0;
background-color: #fff;
}
td {
border: none;
border-bottom: 1px solid #eee;
padding: 8px;
}
}

  .btn-container {
margin-bottom: 20px;
}
.btn {
padding: 10px 20px;
margin-right: 10px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
.btn.active {
background-color: #0056b3;
}
.table-container {
display: none;
}
.table-container.active {
display: block;
}
table {
border-collapse: collapse;
width: 100%;
font-family: Arial, sans-serif;
}
th, td {
padding: 8px 12px;
border: 1px solid #ccc;
text-align: left;
}
th {
background-color: #f2f2f2;
}
function showTable(type) { document.querySelectorAll(‘.table-container’).forEach(div => { div.classList.remove(‘active’); }); document.getElementById(type).classList.add(‘active’); document.querySelectorAll(‘.btn’).forEach(btn => { btn.classList.remove(‘active’); }); event.target.classList.add(‘active’); }