curapil.cz - CSS

/* Základní styly pro tabulku */
.c-product-interconnection-custom--image-select-list-dropdown {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
/* Styly pro záhlaví tabulky */
.c-product-interconnection-custom--image-select-list-dropdown th {
  background-color: #f2f2f2;
  color: #333;
  font-weight: bold;
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
/* Styly pro buňky tabulky */
.c-product-interconnection-custom--image-select-list-dropdown td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
/* Zvýraznění řádků při najetí myší */
.c-product-interconnection-custom--image-select-list-dropdown tr:hover {
  background-color: #f5f5f5;
}
/* Responzivní styly pro mobilní zařízení */
@media (max-width: 768px) {
  .c-product-interconnection-custom--image-select-list-dropdown thead {
    display: none;
  }
  .c-product-interconnection-custom--image-select-list-dropdown tbody, .c-product-interconnection-custom--image-select-list-dropdown tr {
    display: block;
    width: 100%;
  }
  .c-product-interconnection-custom--image-select-list-dropdown td {
    display: block;
    text-align: right;
    padding-left: 50%;
    position: relative;
    border-bottom: 0; /* odstraníme defaultní border */
    box-sizing: border-box;
  }
  /* Oddělíme řádky pomocí marginu a borderu */
  .c-product-interconnection-custom--image-select-list-dropdown tr {
    margin-bottom: 10px; /* přidáme prostor mezi řádky */
    border: 1px solid #e6e6e6; /* lehký border pro oddělení */
    border-radius: 5px; /* zaoblení rohů */
    background: #fff; /* bílé pozadí pro lepší oddělení */
  }
  /* Label pro mobilní zobrazení */
  .c-product-interconnection-custom--image-select-list-dropdown td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    padding-right: 10px;
    text-align: left;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
    width: 45%;
  }
  /* Upravit styl pro odkazy */
  .c-product-interconnection-custom--image-select-list-dropdown a {
    display: inline-block;
    margin: 5px 0;
    width: calc(100% - 20px);
    text-align: center;
  }
}
/* Styly pro tlačítka a odkazy */
.c-product-interconnection-custom--image-select-list-dropdown a {
  color: #007bff;
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid #007bff;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.c-product-interconnection-custom--image-select-list-dropdown a:hover {
  background-color: #007bff;
  color: white;
}
table.c-product-interconnection-custom--image-select-list-dropdown > tr:last-child {
  font-weight: 700;
}