Hoang  Ha

Hoang Ha

1623769205

Tại sao tôi từ chối offer với mức lương 100.000$?

Nhiều bạn hay hỏi mình có thật sự ngành lập trình lương cao, 6 chữ số $ hay không. Do vậy, hôm nay mình sẽ chia sẻ về quá trình mình phỏng vấn 1 công ty với mức lương 6 số, và lý do mình từ chối offer này nhé!

#developer

What is GEEK

Buddha Community

Tại sao tôi từ chối offer với mức lương 100.000$?
Hoang  Ha

Hoang Ha

1623769205

Tại sao tôi từ chối offer với mức lương 100.000$?

Nhiều bạn hay hỏi mình có thật sự ngành lập trình lương cao, 6 chữ số $ hay không. Do vậy, hôm nay mình sẽ chia sẻ về quá trình mình phỏng vấn 1 công ty với mức lương 6 số, và lý do mình từ chối offer này nhé!

#developer

CODE VN

CODE VN

1633761170

Cách Cuộn Bảng Với Tiêu Đề Cố Định Trong HTML

Đôi khi bạn cần tạo bảng cuộn và tiêu đề phải được cố định trong trang web hoặc dự án của bạn. Bạn có thể làm điều đó một cách dễ dàng. Tôi chỉ cho bạn hai ví dụ về bảng cuộn với tiêu đề cố định và bạn có thể xem và triển khai trong trang web của mình. Hãy xem ví dụ đầu tiên:

Ví dụ 1

<html>
<head>
    <title>Table Scroll with fixed header</title>
</head>
<body>
    <table cellspacing="0" cellpadding="0" border="0" width="625">
        <tr>
            <td>
                <table cellspacing="0" cellpadding="1" border="1" width="600">
                    <tr>
                        <th>heading 1</th>
                        <th>heading 2</th>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <div style="width:625px; height:48px; overflow:auto;">
                    <table cellspacing="0" cellpadding="1" border="1" width="600">
                        <tr>
                            <td>data 1/1</td>
                            <td>data 1/2</td>
                        </tr>
                        <tr>
                            <td>data 2/1</td>
                            <td>data 2/2</td>
                        </tr>
                        <tr>
                            <td>data 3/1</td>
                            <td>data 3/1</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Ví dụ-2

<html>
<head>
    <title>Fixed Header - Scrollable Table</title>
    <style type="text/css">
        table#header th {
            border-right: solid 1px #000
        }
        table#header th#right-border {
            padding: 0 4px 0 3px;
            border-right: none;
        }
        table#tbl-content td {
            border-bottom: solid 1px #bbb;
            border-right: solid 1px #bbb;
        }
        table#tbl-content tr#bottom td {
            border-bottom: none;
        }
        #box {
            width: 100%;
            height: 100px;
            overflow-y: auto;
            border: solid 1px #000;
            border-top: none;
        }
        #tbl-content {
            width: 790px;
            table-layout: fixed;
            background: #fff;
        }
        #header {
            width: 790px;
            text-align: left;
            table-layout: fixed;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="content" style="width:807px;">
            <div id="boundary" style="margin-right:-2px;background:darkkhaki;border:solid 1px #000;">
                <table id="header" cellpadding="3" cellspacing="0" border="0">
                    <tr>
                        <th>Id</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                    </tr>
                </table>
            </div>
            <div id="box">
                <table id="tbl-content" cellpadding="3" cellspacing="0" border="0">
                    <tr>
                        <td>1</td>
                        <td>Haresh</td>
                        <td>Patel</td>
                        <td>test@gmail.com</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Mahesh</td>
                        <td>Rathod</td>
                        <td>test2@gmail.com</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Paresh</td>
                        <td>Patel</td>
                        <td>test3@gmail.com</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>John</td>
                        <td>Corter</td>
                        <td>test4@gmail.com</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>Mike</td>
                        <td>Chadns</td>
                        <td>test5@gmail.com</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>Temi</td>
                        <td>Marsh</td>
                        <td>test6@gmail.com</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

#html 
 

Comment faire défiler un tableau avec un en-tête fixe en HTML

Parfois, vous devez créer une table de défilement et l'en-tête doit être corrigé dans votre site Web ou votre projet. Vous pouvez le faire facilement. Je vous montre deux exemples de table défilante avec en-tête fixe que vous pouvez voir et implémenter dans votre site Web. Voyons le premier exemple :

Exemple 1

<html>
<head>
    <title>Table Scroll with fixed header</title>
</head>
<body>
    <table cellspacing="0" cellpadding="0" border="0" width="625">
        <tr>
            <td>
                <table cellspacing="0" cellpadding="1" border="1" width="600">
                    <tr>
                        <th>heading 1</th>
                        <th>heading 2</th>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <div style="width:625px; height:48px; overflow:auto;">
                    <table cellspacing="0" cellpadding="1" border="1" width="600">
                        <tr>
                            <td>data 1/1</td>
                            <td>data 1/2</td>
                        </tr>
                        <tr>
                            <td>data 2/1</td>
                            <td>data 2/2</td>
                        </tr>
                        <tr>
                            <td>data 3/1</td>
                            <td>data 3/1</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Exemple-2

<html>
<head>
    <title>Fixed Header - Scrollable Table</title>
    <style type="text/css">
        table#header th {
            border-right: solid 1px #000
        }
        table#header th#right-border {
            padding: 0 4px 0 3px;
            border-right: none;
        }
        table#tbl-content td {
            border-bottom: solid 1px #bbb;
            border-right: solid 1px #bbb;
        }
        table#tbl-content tr#bottom td {
            border-bottom: none;
        }
        #box {
            width: 100%;
            height: 100px;
            overflow-y: auto;
            border: solid 1px #000;
            border-top: none;
        }
        #tbl-content {
            width: 790px;
            table-layout: fixed;
            background: #fff;
        }
        #header {
            width: 790px;
            text-align: left;
            table-layout: fixed;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="content" style="width:807px;">
            <div id="boundary" style="margin-right:-2px;background:darkkhaki;border:solid 1px #000;">
                <table id="header" cellpadding="3" cellspacing="0" border="0">
                    <tr>
                        <th>Id</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                    </tr>
                </table>
            </div>
            <div id="box">
                <table id="tbl-content" cellpadding="3" cellspacing="0" border="0">
                    <tr>
                        <td>1</td>
                        <td>Haresh</td>
                        <td>Patel</td>
                        <td>test@gmail.com</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Mahesh</td>
                        <td>Rathod</td>
                        <td>test2@gmail.com</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Paresh</td>
                        <td>Patel</td>
                        <td>test3@gmail.com</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>John</td>
                        <td>Corter</td>
                        <td>test4@gmail.com</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>Mike</td>
                        <td>Chadns</td>
                        <td>test5@gmail.com</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>Temi</td>
                        <td>Marsh</td>
                        <td>test6@gmail.com</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Concevoir un carrousel de liste de produits à l'aide de Bootstrap& CSS

Aujourd'hui, nous allons concevoir un carrousel de liste de produits pour un site Web de commerce électronique en utilisant bootstrap et css.

liste de produits

structure de répertoire :

  • image
  • index.html

fichier index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Product List Carousel for Ecommerce Website using Bootstrap</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
body {
    font-family: "Open Sans", sans-serif;
}
h2 {
    color: #000;
    font-size: 26px;
    font-weight: 300;
    text-align: center;
    text-transform: uppercase;
    position: relative;
    margin: 30px 0 80px;
}
h2 b {
    color: #ffc000;
}
h2::after {
    content: "";
    width: 100px;
    position: absolute;
    margin: 0 auto;
    height: 4px;
    background: rgba(0, 0, 0, 0.2);
    left: 0;
    right: 0;
    bottom: -20px;
}
.carousel {
    margin: 50px auto;
    padding: 0 70px;
}
.carousel .carousel-item {
    min-height: 330px;
    text-align: center;
    overflow: hidden;
}
.carousel .carousel-item .img-box {
    height: 160px;
    width: 100%;
    position: relative;
}
.carousel .carousel-item img {  
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    left: 0;
    right: 0;
}
.carousel .carousel-item h4 {
    font-size: 18px;
    margin: 10px 0;
}
.carousel .carousel-item .btn {
    color: #333;
    border-radius: 0;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: bold;
    background: none;
    border: 1px solid #ccc;
    padding: 5px 10px;
    margin-top: 5px;
    line-height: 16px;
}
.carousel .carousel-item .btn:hover, .carousel .carousel-item .btn:focus {
    color: #fff;
    background: #000;
    border-color: #000;
    box-shadow: none;
}
.carousel .carousel-item .btn i {
    font-size: 14px;
    font-weight: bold;
    margin-left: 5px;
}
.carousel .thumb-wrapper {
    text-align: center;
}
.carousel .thumb-content {
    padding: 15px;
}
.carousel-control-prev, .carousel-control-next {
    height: 100px;
    width: 40px;
    background: none;
    margin: auto 0;
    background: rgba(0, 0, 0, 0.2);
}
.carousel-control-prev i, .carousel-control-next i {
    font-size: 30px;
    position: absolute;
    top: 50%;
    display: inline-block;
    margin: -16px 0 0 0;
    z-index: 5;
    left: 0;
    right: 0;
    color: rgba(0, 0, 0, 0.8);
    text-shadow: none;
    font-weight: bold;
}
.carousel-control-prev i {
    margin-left: -3px;
}
.carousel-control-next i {
    margin-right: -3px;
}
.carousel .item-price {
    font-size: 13px;
    padding: 2px 0;
}
.carousel .item-price strike {
    color: #999;
    margin-right: 5px;
}
.carousel .item-price span {
    color: #86bd57;
    font-size: 110%;
}   
.carousel .carousel-indicators {
    bottom: -50px;
}
.carousel-indicators li, .carousel-indicators li.active {
    width: 10px;
    height: 10px;
    margin: 4px;
    border-radius: 50%;
    border-color: transparent;
    border: none;
}
.carousel-indicators li {   
    background: rgba(0, 0, 0, 0.2);
}
.carousel-indicators li.active {    
    background: rgba(0, 0, 0, 0.6);
}
.star-rating li {
    padding: 0;
}
.star-rating i {
    font-size: 14px;
    color: #ffc000;
}
</style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2>Latest Trending <b>Products</b></h2>
            <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="0">
            <!-- Carousel indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>   
            <!-- Wrapper for carousel items -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <div class="row">
                        <div class="col-sm-3">
                            <div class="thumb-wrapper">
                                <div class="img-box">
                                    <img src="images/image1.jpg" class="img-fluid" alt="">
                                </div>
                                <div class="thumb-content">
                                    <h4>Apple iPad</h4>
                                    <p class="item-price"><strike>$400.00</strike> <span>$369.00</span></p>
                                    <div class="star-rating">
                                        <ul class="list-inline">
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star-o"></i></li>
                                        </ul>
                                    </div>
                                    <a href="#" class="btn btn-primary">Add to Cart</a>
                                </div>                      
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="thumb-wrapper">
                                <div class="img-box">
                                    <img src="images/image2.jpg" class="img-fluid" alt="">
                                </div>
                                <div class="thumb-content">
                                    <h4>Sony Headphone</h4>
                                    <p class="item-price"><strike>$25.00</strike> <span>$23.99</span></p>
                                    <div class="star-rating">
                                        <ul class="list-inline">
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star-o"></i></li>
                                        </ul>
                                    </div>
                                    <a href="#" class="btn btn-primary">Add to Cart</a>
                                </div>                      
                            </div>
                        </div>      
                        <div class="col-sm-3">
                            <div class="thumb-wrapper">
                                <div class="img-box">
                                    <img src="images/image3.jpg" class="img-fluid" alt="">
                                </div>
                                <div class="thumb-content">
                                    <h4>Macbook Air</h4>
                                    <p class="item-price"><strike>$899.00</strike> <span>$649.00</span></p>
                                    <div class="star-rating">
                                        <ul class="list-inline">
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star-half-o"></i></li>
                                        </ul>
                                    </div>
                                    <a href="#" class="btn btn-primary">Add to Cart</a>
                                </div>                      
                            </div>
                        </div>                              
                        <div class="col-sm-3">
                            <div class="thumb-wrapper">
                                <div class="img-box">
                                    <img src="images/image4.jpg" class="img-fluid" alt="">
                                </div>
                                <div class="thumb-content">
                                    <h4>Nikon DSLR</h4>
                                    <p class="item-price"><strike>$315.00</strike> <span>$250.00</span></p>
                                    <div class="star-rating">
                                        <ul class="list-inline">
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star-o"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star-o"></i></li>
                                        </ul>
                                    </div>
                                    <a href="#" class="btn btn-primary">Add to Cart</a>
                                </div>                      
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="row">
                        <div class="col-sm-3">
                            <div class="thumb-wrapper">
                                <div class="img-box">
                                    <img src="images/image5.jpg" class="img-fluid" alt="">
                                </div>
                                <div class="thumb-content">
                                    <h4>Sony Play Station</h4>
                                    <p class="item-price"><strike>$289.00</strike> <span>$269.00</span></p>
                                    <div class="star-rating">
                                        <ul class="list-inline">
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star-o"></i></li>
                                        </ul>
                                    </div>
                                    <a href="#" class="btn btn-primary">Add to Cart</a>
                                </div>                      
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="thumb-wrapper">
                                <div class="img-box">
                                    <img src="images/image6.jpg" class="img-fluid" alt="">
                                </div>
                                <div class="thumb-content">
                                    <h4>Macbook Pro</h4>
                                    <p class="item-price"><strike>$1099.00</strike> <span>$869.00</span></p>
                                    <div class="star-rating">
                                        <ul class="list-inline">
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star-half-o"></i></li>
                                        </ul>
                                    </div>
                                    <a href="#" class="btn btn-primary">Add to Cart</a>
                                </div>                      
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="thumb-wrapper">
                                <div class="img-box">
                                    <img src="images/image7.jpg" class="img-fluid" alt="">
                                </div>
                                <div class="thumb-content">
                                    <h4>Bose Speaker</h4>
                                    <p class="item-price"><strike>$109.00</strike> <span>$99.00</span></p>
                                    <div class="star-rating">
                                        <ul class="list-inline">
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star-o"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star-o"></i></li>
                                        </ul>
                                    </div>
                                    <a href="#" class="btn btn-primary">Add to Cart</a>
                                </div>                      
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="thumb-wrapper">
                                <div class="img-box">
                                    <img src="images/image3.jpg" class="img-fluid" alt="">
                                </div>
                                <div class="thumb-content">
                                    <h4>Samsung Galaxy S8</h4>
                                    <p class="item-price"><strike>$599.00</strike> <span>$569.00</span></p>
                                    <div class="star-rating">
                                        <ul class="list-inline">
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star-o"></i></li>
                                        </ul>
                                    </div>
                                    <a href="#" class="btn btn-primary">Add to Cart</a>
                                </div>                      
                            </div>
                        </div>                      
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="row">
                        <div class="col-sm-3">
                            <div class="thumb-wrapper">
                                <div class="img-box">
                                    <img src="images/image5.jpg" class="img-fluid" alt="">
                                </div>
                                <div class="thumb-content">
                                    <h4>Apple iPhone</h4>
                                    <p class="item-price"><strike>$369.00</strike> <span>$349.00</span></p>
                                    <div class="star-rating">
                                        <ul class="list-inline">
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star-o"></i></li>
                                        </ul>
                                    </div>
                                    <a href="#" class="btn btn-primary">Add to Cart</a>
                                </div>                      
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="thumb-wrapper">
                                <div class="img-box">
                                    <img src="images/image2.jpg" class="img-fluid" alt="">
                                </div>
                                <div class="thumb-content">
                                    <h4>Canon DSLR</h4>
                                    <p class="item-price"><strike>$315.00</strike> <span>$250.00</span></p>
                                    <div class="star-rating">
                                        <ul class="list-inline">
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star-o"></i></li>
                                        </ul>
                                    </div>
                                    <a href="#" class="btn btn-primary">Add to Cart</a>
                                </div>                      
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="thumb-wrapper">
                                <div class="img-box">
                                    <img src="images/image7.jpg" class="img-fluid" alt="">
                                </div>
                                <div class="thumb-content">
                                    <h4>Google Pixel</h4>
                                    <p class="item-price"><strike>$450.00</strike> <span>$418.00</span></p>
                                    <div class="star-rating">
                                        <ul class="list-inline">
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star-o"></i></li>
                                        </ul>
                                    </div>
                                    <a href="#" class="btn btn-primary">Add to Cart</a>
                                </div>                      
                            </div>
                        </div>  
                        <div class="col-sm-3">
                            <div class="thumb-wrapper">
                                <div class="img-box">
                                    <img src="images/image5.jpg" class="img-fluid" alt="">
                                </div>
                                <div class="thumb-content">
                                    <h4>Apple Watch</h4>
                                    <p class="item-price"><strike>$350.00</strike> <span>$330.00</span></p>
                                    <div class="star-rating">
                                        <ul class="list-inline">
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star"></i></li>
                                            <li class="list-inline-item"><i class="fa fa-star-o"></i></li>
                                        </ul>
                                    </div>
                                    <a href="#" class="btn btn-primary">Add to Cart</a>
                                </div>                      
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Carousel controls -->
            <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
                <i class="fa fa-angle-left"></i>
            </a>
            <a class="carousel-control-next" href="#myCarousel" data-slide="next">
                <i class="fa fa-angle-right"></i>
            </a>
        </div>
        </div>
    </div>
</div>
</body>
</html>       

So scrollen Sie die Tabelle mit festem Header in HTML

Manchmal müssen Sie eine Scroll-Tabelle erstellen und die Kopfzeile muss in Ihrer Website oder Ihrem Projekt korrigiert werden. Sie können es leicht tun. Ich zeige Ihnen zwei Beispiele für eine scrollende Tabelle mit festem Header, die Sie sehen und in Ihre Website implementieren können. Sehen wir uns das erste Beispiel an:

Beispiel 1

<html>
<head>
    <title>Table Scroll with fixed header</title>
</head>
<body>
    <table cellspacing="0" cellpadding="0" border="0" width="625">
        <tr>
            <td>
                <table cellspacing="0" cellpadding="1" border="1" width="600">
                    <tr>
                        <th>heading 1</th>
                        <th>heading 2</th>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <div style="width:625px; height:48px; overflow:auto;">
                    <table cellspacing="0" cellpadding="1" border="1" width="600">
                        <tr>
                            <td>data 1/1</td>
                            <td>data 1/2</td>
                        </tr>
                        <tr>
                            <td>data 2/1</td>
                            <td>data 2/2</td>
                        </tr>
                        <tr>
                            <td>data 3/1</td>
                            <td>data 3/1</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Beispiel-2

<html>
<head>
    <title>Fixed Header - Scrollable Table</title>
    <style type="text/css">
        table#header th {
            border-right: solid 1px #000
        }
        table#header th#right-border {
            padding: 0 4px 0 3px;
            border-right: none;
        }
        table#tbl-content td {
            border-bottom: solid 1px #bbb;
            border-right: solid 1px #bbb;
        }
        table#tbl-content tr#bottom td {
            border-bottom: none;
        }
        #box {
            width: 100%;
            height: 100px;
            overflow-y: auto;
            border: solid 1px #000;
            border-top: none;
        }
        #tbl-content {
            width: 790px;
            table-layout: fixed;
            background: #fff;
        }
        #header {
            width: 790px;
            text-align: left;
            table-layout: fixed;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="content" style="width:807px;">
            <div id="boundary" style="margin-right:-2px;background:darkkhaki;border:solid 1px #000;">
                <table id="header" cellpadding="3" cellspacing="0" border="0">
                    <tr>
                        <th>Id</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                    </tr>
                </table>
            </div>
            <div id="box">
                <table id="tbl-content" cellpadding="3" cellspacing="0" border="0">
                    <tr>
                        <td>1</td>
                        <td>Haresh</td>
                        <td>Patel</td>
                        <td>test@gmail.com</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Mahesh</td>
                        <td>Rathod</td>
                        <td>test2@gmail.com</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Paresh</td>
                        <td>Patel</td>
                        <td>test3@gmail.com</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>John</td>
                        <td>Corter</td>
                        <td>test4@gmail.com</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>Mike</td>
                        <td>Chadns</td>
                        <td>test5@gmail.com</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>Temi</td>
                        <td>Marsh</td>
                        <td>test6@gmail.com</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>