Аялалын цэгүүдийг харьцуулсан хүснэгтийг "HTML & CSS" ашиглан хийх

📕 Зөвхөн "HTML & CSS" ашиглан "travel destination" хүснэгт хийх.

Зарим үед том хэмжээний "data set" г вэб дээр дүрслэх үед хүснэгтийн тодорхой багануудыг түгжих "sticky column, header" шаардлага гардаг. Үүнийг ихэвчлэн "Javascript" ашиглан шийддэг. Гэвч "Javascript" нь олон зуун бичлэгтэй үед "performance" ийн хувьд тийм ч зөв шийдэл биш бөгөөд хэрэглэгчийн компьютерийн "санах ойн" зарцуулалтыг хэт их ашиглах, улмаар хэрэглэгчийн компьютер гацах зэрэг асуудал үүсдэг. Энэ нь "Developer" уудын хувьд хар дарсан зүүд л гэсэн үг 😓.

🔥 Тэгвэл илүү "clean" байдлаар ямар нэг нэмэлт "package" эсвэл "custom script" бичихгүй, маш энгийн шийдэх арга нь "css" ашиглах юм. Орчин үеийн ихэнхи интернет хөтчүүд "css" - н шинэ боломжуудыг дэмждэг болсон. Энэ арга нь "performance" хувьд хурдан, мөн кодоо "clean, simple" хадгалж чадна.

Доорхи "interactive" жишээг харна уу! Хэрвээ та мобайл төхөөрөмжнөөс үзэж буй бол хүснэгтийн датаг "swipe right, left" (<- ->) хийж харах боломжтой.

• Энэхүү хүснэгтийн дата үнэн зөв биш бөгөөд зөвхөн "visual" байдлаар дүрслэхэд ашигласан жишээ утгууд юм!

:root {
    --main-background: #F8F8FF;
    --table-background: #FCFCFD;
    --primary-color: #272727;
    --gray-color: #A0A7B1;
    --odd-row: #f6f9ff;
    --th-background: #F4F5FC;
    --gray-background: #EDEEF1;
    --gray-mid: #F1F2F6;
}
.table-widget {
    border-radius: 1rem;
    background-color: var(
        --table-background);
    padding: 0.5rem;
    border: 2px solid var(
        --gray-background);
    box-shadow: 0px 4px 16px 0px 
        rgba(148, 156, 169, 0.15);
    text-align: left;
}

.table-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    padding-bottom: 0.5rem;
}

.table-widget table {
    max-width: 37.5rem;
    border-collapse: collapse;
    table-layout: fixed;
}

.table-widget thead {
    position: sticky;
}

.table-widget th {
    padding: 0.75rem 0.75rem 0.75rem 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-color);
    width: fit-content;
    white-space: nowrap;
    background-color: var(
        --th-background);
}

.table-widget tfoot {
    margin-top: 1rem;
    border-top: 2px solid var(
        --gray-background);
}

.table-widget td {
    padding: 0.75rem 0.75rem 0.75rem 0.5rem;
    vertical-align: middle;
    white-space: nowrap;
    border-bottom: 2px solid var(
        --gray-background);
}

.caption-container {
    display: flex;
    width: 100%;
    align-items: center;
}

.travel-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.travel-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.travel img {
    width: 2.625rem;
    height: 2.625rem;
    object-fit: contain;
    border-radius: 0.5rem;
}

.table-widget {
    min-height: 5rem;
}

.sticky-left {
    position: sticky;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: var(
        --table-background);
}

.sticky-right {
    position: sticky;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: var(
        --table-background);
}

.caption-container {
    display: flex;
    align-items: center;
}

.caption-container svg {
    margin-top: -0.125rem;
}

.sticky-right button {
    border-radius: 0.75rem;
    background-color: var(
        --gray-mid);
    color: var(--primary-color);
    outline: none;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s 
        ease-in-out;
    padding: 0.675rem 1rem;
}

.sticky-right button:hover {
    background-color: var(
        --primary-color);
    color: var(
        --main-background);
}


.table-wrapper::-webkit-scrollbar {
    height: 0.75rem;
}

.table-wrapper::-webkit-scrollbar-track {
    background: var(
        --gray-mid);
    border-radius: 0.45rem;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: var(
        --gray-color);
    border-radius: 0.4rem;
}

<div class="table-widget">
    <div class="table-wrapper">
        <table>
          <thead>
            <tr>
              <th class="sticky-left">Хот</th>
              <th>Дундаж (°C)</th>
              <th>Үнэ</th>
              <th>Tourist Attractions</th>
              <th>Safety</th>
              <th>Local Cuisine</th>
              <th>Popular Activities</th>
              <th>Language Spoken</th>
              <th class="sticky-right"></th>
            </tr>
          </thead>
          <tbody id="table-rows">
            <tr>
              <td class="travel sticky-left">
                  <div class="travel-wrapper">Paris</div>
              </td>
              <td>15</td>
              <td>$150</td>
              <td>Eiffel Tower, Louvre Museum</td>
              <td>9</td>
              <td>French cuisine</td>
              <td>Shopping, Sightseeing</td>
              <td>French</td>
              <td class="sticky-right">
                <button class="btn btn--primary">...</button>
              </td>
            </tr>
            <tr>
             ...
            </tr>
          </tbody>
        </table>
    </div>
</div>