原生html+css 实现table表格超出宽度后，table的第一列和第二列固定左侧，其余列左右滚动

最新推荐文章于 2024-04-28 14:57:52 发布

柠檬花开_

最新推荐文章于 2024-04-28 14:57:52 发布

阅读量474

点赞数 1

文章标签： html css 前端

本文链接：https://blog.csdn.net/sunny_lxm/article/details/137600745

版权

<!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>