Sprendimų testavimo puslapis

 <!-- Konteineris, apgaubiantis visą lentelės komponentą. Naudojamas ID leidžia pritaikyti stilius tik šiai konkrečiai lentelei. -->
<div id="minimalist-compact-table">

  <!-- Pati HTML lentelė su klase, kuri naudojama CSS stiliams pritaikyti. -->
  <table class="minimalist-table">
    <!-- Lentelės antraštės dalis. -->
    <thead>
      <!-- Viena antraštės eilutė. -->
      <tr>
        <!-- Lentelės stulpelių pavadinimai. -->
        <th>Aukštas</th>
        <th>Nr.</th>
        <th>Kambarių sk.</th>
        <th>Plotas kvm</th>
        <th>Būsena</th>
        <th>Kaina</th>
        <th>Ypatybės</th>
      </tr>
    </thead>
    <!-- Lentelės turinio (duomenų) dalis. -->
    <tbody>

      <!-- ========= BUTAI SURŪŠIUOTI PAGAL NUMERĮ (Nr.) DIDĖJIMO TVARKA ========= -->

      <!-- Kiekviena <tr> žymi vieną butą (vieną lentelės eilutę). -->
      <!-- Kiekvienas <td> yra langelis, atitinkantis stulpelio pavadinimą. -->
      <tr><td>1</td><td>1</td><td>3</td><td>71.93</td><td>Laisvas</td><td>316 400 €</td><td>Terasa 15kvm</td></tr>
      <tr><td>1</td><td>2</td><td>2</td><td>41.78</td><td><strong>Rezervuotas</strong></td><td>183 800 €</td><td>Terasa 10kvm</td></tr>
      <tr class="status-parduotas"><td>1</td><td>3</td><td>3</td><td>58.65</td><td><b>Parduotas</b></td><td>258 000 €</td><td>Terasa 15kvm</td></tr>
      <tr><td>1</td><td>4</td><td>3</td><td>56.04</td><td>Laisvas</td><td>246 500€</td><td>Terasa 15kvm</td></tr>
      <tr><td>1</td><td>5</td><td>3</td><td>55.27</td><td>Laisvas</td><td>243 100 €</td><td>Terasa 15kvm</td></tr>
      <tr><td>2</td><td>6</td><td>3</td><td>71.93</td><td>Laisvas</td><td>316 400€</td><td>Balkonas 5kvm</td></tr>
      <tr><td>2</td><td>7</td><td>2</td><td>41.78</td><td>Laisvas</td><td>183 800€</td><td>Balkonas 2.5kvm</td></tr>
      <tr><td>2</td><td>8</td><td>3</td><td>58.98</td><td>Laisvas</td><td>259 500€</td><td>Balkonas 5kvm</td></tr>
      <tr class="status-parduotas"><td>2</td><td>9</td><td>3</td><td>56.04</td><td><strong>Parduotas</strong></td><td>246 500 €</td><td>Balkonas 5kvm</td></tr>
      <tr><td>2</td><td>10</td><td>3</td><td>57.82</td><td>Laisvas</td><td>254 400 €</td><td>Balkonas 5kvm</td></tr>
      <tr><td>3</td><td>11</td><td>3</td><td>71.93</td><td>Laisvas</td><td>309 200€</td><td>Balkonas 5kvm</td></tr>
      <tr><td>3</td><td>12</td><td>3</td><td>41.78</td><td>Laisvas</td><td>179 600€</td><td>Balkonas 2.5kvm</td></tr>
      <tr><td>3</td><td>13</td><td>3</td><td>58.98</td><td>Laisvas</td><td>253 600€</td><td>Balkonas 5kvm</td></tr>
      <tr><td>3</td><td>14</td><td>3</td><td>56.04</td><td>Laisvas</td><td>240 900 €</td><td>Balkonas 5kvm</td></tr>
      <tr><td>3</td><td>15</td><td>3</td><td>57.82</td><td>Laisvas</td><td>248 600€</td><td>Balkonas 5kvm</td></tr>
      <tr><td>4</td><td>16</td><td>3</td><td>71.93</td><td>Laisvas</td><td>302 100€</td><td>Balkonas 5kvm</td></tr>
      <tr><td>4</td><td>17</td><td>2</td><td>41.78</td><td>Laisvas</td><td>175 400€</td><td>Balkonas 2.5kvm</td></tr>
      <tr><td>4</td><td>18</td><td>3</td><td>58.98</td><td>Laisvas</td><td>247 700€</td><td>Balkonas 5kvm</td></tr>
      <tr><td>4</td><td>19</td><td>3</td><td>56.04</td><td>Laisvas</td><td>235 300 €</td><td>Balkonas 5kvm</td></tr>
      <tr><td>4</td><td>20</td><td>3</td><td>57.82</td><td>Laisvas</td><td>242 800€</td><td>Balkonas 5kvm</td></tr>
    </tbody>
  </table>

</div>

<style>
/* --- Minimalistinės lentelės stiliai --- */

/* Pagrindinio konteinerio stilius */
#minimalist-compact-table {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 2rem 0;
}

/* 
  ==============================================================
  --- DESKTOP STYLES (ekranai platesni nei 768px) ---
  ==============================================================
*/

/* Bendras lentelės stilius */
#minimalist-compact-table .minimalist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 20px; /* CHANGED: Increased font size for desktop view */
}

/* Bendras stilius lentelės antraštės (th) ir duomenų (td) langeliams */
#minimalist-compact-table .minimalist-table th,
#minimalist-compact-table .minimalist-table td {
  border: 0;
  padding: 18px 10px; /* CHANGED: Increased padding for better spacing with larger font */
  text-align: left;
  vertical-align: middle; /* Ensures content is vertically centered in cells */
}

/* Stilius tik lentelės antraštės langeliams (th) */
#minimalist-compact-table .minimalist-table thead th {
  border-bottom: 2px solid #333;
  font-weight: 600;
  text-align: left;
}

/* Stilius tik lentelės turinio langeliams (td) */
#minimalist-compact-table .minimalist-table tbody td {
  border-bottom: 1px solid #e0e0e0;
}

/* Stilius kas antrai lentelės turinio eilutei ("zebro" efektas) desktop versijai */
#minimalist-compact-table .minimalist-table tbody tr:nth-child(even) {
  background-color: #f9fafb; /* A very subtle light gray for alternating rows */
}

/* Specialus stilius eilutėms, kurios turi klasę "status-parduotas" */
#minimalist-compact-table .minimalist-table tr.status-parduotas td {
  color: #888;
}

/* --- STULPELIŲ PLOČIO OPTIMIZAVIMAS STALINIAMS KOMPIUTERIAMS --- */
#minimalist-compact-table .minimalist-table th:nth-child(1) { width: 8%; }
#minimalist-compact-table .minimalist-table th:nth-child(2) { width: 6%; }
#minimalist-compact-table .minimalist-table th:nth-child(3) { width: 12%; }
#minimalist-compact-table .minimalist-table th:nth-child(4) { width: 12%; }
#minimalist-compact-table .minimalist-table th:nth-child(5) { width: 18%; }
#minimalist-compact-table .minimalist-table th:nth-child(6) { width: 18%; }
#minimalist-compact-table .minimalist-table th:nth-child(7) { width: 26%; }


/* 
  ==============================================================
  --- MOBILE STYLES (ekrano plotis 768px ar mažiau) ---
  ==============================================================
  Ši dalis liko nepakeista, kad mobilus vaizdas išliktų toks pats.
*/
@media screen and (max-width: 768px) {
  #minimalist-compact-table .minimalist-table {
    table-layout: fixed;
  }

  #minimalist-compact-table .minimalist-table th,
  #minimalist-compact-table .minimalist-table td {
    font-size: 9.5px;
    padding: 4px 2px;
    word-break: break-word;
    text-align: center;
  }

  #minimalist-compact-table .minimalist-table thead th {
    text-align: center;
  }

  /* --- STULPELIŲ PLOČIŲ PAKEITIMAI MOBILIESIEMS --- */
  #minimalist-compact-table .minimalist-table th:nth-child(1) { width: 11%; }
  #minimalist-compact-table .minimalist-table th:nth-child(2) { width: 8%; }
  #minimalist-compact-table .minimalist-table th:nth-child(3) { width: 15%; }
  #minimalist-compact-table .minimalist-table th:nth-child(4) { width: 13%; }
  #minimalist-compact-table .minimalist-table th:nth-child(5) { width: 15%; }
  #minimalist-compact-table .minimalist-table th:nth-child(6) { width: 18%; }
  #minimalist-compact-table .minimalist-table th:nth-child(7) { width: 20%; }
  
  /* Panaikinamas "zebro" efektas mobiliojoje versijoje, kad vaizdas būtų švaresnis */
  #minimalist-compact-table .minimalist-table tbody tr:nth-child(even) {
    background-color: transparent;
  }
}
</style>

Sprendimas 4

Kliento kodas

 

 

Sprendimas 1

Sprendimas 2

Sprendimas 3