<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>products compare</title>
<style>
.product-compare-detail-specs {
max-width: 1500px;
/* dynamic allocation*/
margin: 50px auto 50px auto;
}
.product-compare-detail-specs .section-header__title {
color: #2f2725;
font-family: MetropolisBold;
font-size: 36px;
}
.product-compare-detail-specs .section-header_sub {
color: #464a4b;
font-size: 18px;
line-height: 1.5; /* 150% */
}
.table-container {
overflow-x: auto;
}
.product-compare-detail-specs table {
border-collapse: collapse;
width: 100%;
font-size: 16px;
}
.product-compare-detail-specs th,
.product-compare-detail-specs td {
padding: 19px 8px;
}
.detail-compare-table tr {
border-bottom: 1px solid #e0e0e0;
}
.product-compare-detail-specs th:nth-child(1),
.product-compare-detail-specs td:nth-child(1),
.product-compare-detail-specs th:nth-child(2),
.product-compare-detail-specs td:nth-child(2) {
position: sticky;
z-index: 1;
}
.product-compare-detail-specs th:nth-child(1),
.product-compare-detail-specs td:nth-child(1),
.product-compare-detail-specs th:nth-child(2) {
background-color: #ffffff;
}
.product-compare-detail-specs td:nth-child(2) {
background-color: #edf9ff;
}
.product-compare-detail-specs th:nth-child(1),
.product-compare-detail-specs td:nth-child(1) {
left: 0;
width: 230px;
min-width: 230px;
font-family: MetropolisBold;
}
.product-compare-detail-specs th:nth-child(2),
.product-compare-detail-specs td:nth-child(2) {
left: 230px;
width: 230px;
min-width: 230px;
}
.product-compare-detail-specs th:nth-child(n + 3),
.product-compare-detail-specs td:nth-child(n + 3) {
width: 230px;
min-width: 230px;
}
.compare-detail-container {
margin-top: 40px;
}
.compare-detail-container .table-header {
display: flex;
flex-direction: column;
justify-content: center;
border-bottom: 0!important;
}
.table-header .product-image {
width: 130px;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.meta-field-item {
width: 100%;
word-break: break-word;
color: #2F2725;
}
.product-compare-detail-specs .product-title {
text-align: left;
font-family: MetropolisBold;
color: #2f2725;
transition: all 0.4s;
}
.table-header:hover .product-title {
color: #158cc5;
}
</style>
</head>
<body>
<div class="product-compare-detail-specs test revamp-section">
<div class="table-container compare-detail-container">
<table id="myTable" class="detail-compare-table">
<thead>
<tr>
<th></th>
<th class="main-product-header">
<a href="" class="table-header">
<img
src="../../images/product-compare-1.png"
alt=""
class="product-image"
>
<span class="product-title"> product.title </span>
</a>
</th>
<!-- 对比产品头部 最多支持4个 -->
<th>
<a href="" class="table-header">
<img src="../../images/product-compare-1.png" alt="" class="product-image">
<span class="product-title">compareItem.title</span>
</a>
</th>
<th>
<a href="" class="table-header">
<img src="../../images/product-compare-1.png" alt="" class="product-image">
<span class="product-title">compareItem.title </span>
</a>
</th>
<th>
<a href="" class="table-header">
<img src="../../images/product-compare-1.png" alt="" class="product-image">
<span class="product-title">compareItem.title </span>
</a>
</th>
<th>
<a href="" class="table-header">
<img src="../../images/product-compare-1.png" alt="" class="product-image">
<span class="product-title">compareItem.title</span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="meta-field-item">modell</div></td>
<td>
<span class="meta-field-item">modell</span>
</td>
<td>
<span class="meta-field-item">modell</span>
</td>
<td>
<span class="meta-field-item">modell</span>
</td>
<td>
<span class="meta-field-item">modell</span>
</td>
<td>
<span class="meta-field-item">modell</span>
</td>
</tr>
<tr>
<td><div class="meta-field-item">Working Area</div></td>
<td>
<span class="meta-field-item">510mm x 300 mm</span>
</td>
<td>
<span class="meta-field-item">510mm x 300 mm</span>
</td>
<td>
<span class="meta-field-item">510mm x 300 mm</span>
</td>
<td>
<span class="meta-field-item">510mm x 300 mm</span>
</td>
<td>
<span class="meta-field-item">510mm x 300 mm</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>