155 lines
3.8 KiB
HTML
155 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="http://localhost:3000/static/css/main.chunk.css">
|
|
<style>
|
|
/* EXCEL-STYLE TABLE ALIGNMENT TEST */
|
|
.materials-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-family: "Calibri", "Segoe UI", system-ui, sans-serif;
|
|
font-size: 14px;
|
|
background: white;
|
|
border: 1px solid #c0c0c0;
|
|
}
|
|
|
|
.materials-table th {
|
|
background-color: #f2f2f2;
|
|
color: #000;
|
|
padding: 10px 8px;
|
|
text-align: center !important;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
border: 1px solid #d0d0d0;
|
|
}
|
|
|
|
.materials-table td {
|
|
padding: 6px 10px;
|
|
border: 1px solid #d0d0d0;
|
|
font-size: 14px;
|
|
line-height: 1.4;
|
|
vertical-align: middle;
|
|
background: white;
|
|
color: #000;
|
|
}
|
|
|
|
/* Kolonne 1: Produktnavn - LEFT */
|
|
.materials-table td:nth-child(1) {
|
|
text-align: left !important;
|
|
padding-left: 12px !important;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Kolonne 2: Varenummer - CENTER */
|
|
.materials-table td:nth-child(2) {
|
|
text-align: center !important;
|
|
}
|
|
|
|
/* Kolonne 3: Kategori - CENTER */
|
|
.materials-table td:nth-child(3) {
|
|
text-align: center !important;
|
|
}
|
|
|
|
/* Kolonne 4: Leverandør - CENTER */
|
|
.materials-table td:nth-child(4) {
|
|
text-align: center !important;
|
|
}
|
|
|
|
/* Kolonne 5: Nettopris - RIGHT */
|
|
.materials-table td:nth-child(5) {
|
|
text-align: right !important;
|
|
padding-right: 12px !important;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Kolonne 6: Bruttopris - RIGHT */
|
|
.materials-table td:nth-child(6) {
|
|
text-align: right !important;
|
|
padding-right: 12px !important;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Kolonne 7: Enhed - CENTER */
|
|
.materials-table td:nth-child(7) {
|
|
text-align: center !important;
|
|
}
|
|
|
|
/* Kolonne 8: Handlinger - CENTER */
|
|
.materials-table td:nth-child(8) {
|
|
text-align: center !important;
|
|
}
|
|
|
|
.product-code-badge {
|
|
background: #f5f5f5;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.category-badge {
|
|
background: #e3f2fd;
|
|
color: #1976d2;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.bygma-badge {
|
|
background: #ff6b35;
|
|
color: white;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="padding: 20px; background: #f8f9fa;">
|
|
<h2>Materialer Tabel - Alignment Test</h2>
|
|
<table class="materials-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Produktnavn</th>
|
|
<th>Varenummer</th>
|
|
<th>Kategori</th>
|
|
<th>Leverandør</th>
|
|
<th>Nettopris</th>
|
|
<th>Bruttopris</th>
|
|
<th>Enhed</th>
|
|
<th>Handlinger</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="material-row">
|
|
<td>0,8MM WALLMANN KANTLISTE PROF 3,0X410CM 230 GRÅ</td>
|
|
<td><span class="product-code-badge">203114</span></td>
|
|
<td><span class="category-badge">Byggematerialer og plader</span></td>
|
|
<td>Bygma</td>
|
|
<td class="price-cell">77,97 kr</td>
|
|
<td class="price-cell">103,96 kr</td>
|
|
<td>STK</td>
|
|
<td class="actions"><span class="bygma-badge" title="Bygma produkt - kan ikke redigeres">🏗️ Bygma</span></td>
|
|
</tr>
|
|
<tr class="material-row">
|
|
<td>1,0MM WALLMANN KANTLISTE 3,0X410CM 130 HVID</td>
|
|
<td><span class="product-code-badge">203115</span></td>
|
|
<td><span class="category-badge">Byggematerialer og plader</span></td>
|
|
<td>Bygma</td>
|
|
<td class="price-cell">89,50 kr</td>
|
|
<td class="price-cell">119,33 kr</td>
|
|
<td>STK</td>
|
|
<td class="actions"><span class="bygma-badge">🏗️ Bygma</span></td>
|
|
</tr>
|
|
<tr class="material-row">
|
|
<td>Gipsplader 13mm standard</td>
|
|
<td><span class="product-code-badge">100234</span></td>
|
|
<td><span class="category-badge">Gips og spartelmasse</span></td>
|
|
<td>XYZ Byg</td>
|
|
<td class="price-cell">45,00 kr</td>
|
|
<td class="price-cell">60,00 kr</td>
|
|
<td>M²</td>
|
|
<td class="actions">✏️ 🗑️</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</body>
|
|
</html>
|