🎨Cấu hình bảng ai-table cho Blogger

Chèn trước thẻ đóng </head>

<style>
      /* ==== Bảng .ai-table (sáng) ==== */
      table.ai-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        margin: 1em 0;
        font-size: 14px;
        line-height: 1.5;
        background: #fff;
        /* 🎯 Hiệu ứng giống AdminLTE nhưng dùng màu xám */
        border: 1px solid #ccc;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* nhẹ và tinh tế */
        overflow: hidden;
      }
      /* Header bảng */
      .ai-table thead {
        background-color: #f2f2f2;
        color: #333;
        font-weight: bold;
      }
      /* Các ô bảng */
      .ai-table th,
      .ai-table td {
        padding: 10px 14px;
        border-top: 1px solid #ccc;  /* Hoặc border-bottom để tránh tô 02 lần */
        text-align: left;
      }
      /*tránh tô viền top thẻ th 02 lần*/
      .ai-table th{ border-top: none;}

      /* So le nền */
      .ai-table tbody tr:nth-child(even) {
        background-color: #fafafa;
      }
      /* Hover */
      .ai-table tbody tr:hover {
        background-color: #f5faff;
      }
      /* Bo góc riêng cho các ô ngoài cùng */
      .ai-table thead th:first-child {
        border-top-left-radius: 8px;
      }
      .ai-table thead th:last-child {
        border-top-right-radius: 8px;
      }
      .ai-table tbody tr:last-child td:first-child {
        border-bottom-left-radius: 8px;
      }
      .ai-table tbody tr:last-child td:last-child {
        border-bottom-right-radius: 8px;
      }

    /* Responsive bảng cho mobile */
      @media (max-width: 600px) {
        .ai-table, .ai-table thead, .ai-table tbody, .ai-table th, .ai-table td, .ai-table tr {
          display: block;
        }


        .ai-table thead {
          display: none;
        }


        .ai-table td {
          position: relative;
          padding-left: 50%;
          border: 1px solid #ddd;
        }


        .ai-table td::before {
          content: attr(data-label);
          position: absolute;
          left: 12px;
          top: 8px;
          font-weight: bold;
          white-space: nowrap;
        }
      }


    /* Hiệu ứng phóng to toàn bảng khi rê chuột */
      .table-hover-combo {
        transition: all 0.3s ease;
        transform-origin: top left;
      }
      .table-hover-combo:hover {
        transform: translate(5px, -5px);
        font-size: 1.05em;
        z-index: 99;
        position: relative;
        background-color: #fff;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
      }

      /* Scroll ngang nếu bảng quá rộng */
      .table-hover-combo-wrapper {
        overflow-x: auto;
      }
</style>

Chèn trước thẻ </body>

<b:if cond='true'>
    <script type='text/javascript'>
    //<![CDATA[    
        console.log("🎯 Script ai-table đang chạy");
        document.addEventListener("DOMContentLoaded", function () {
            //né thẻ nào đã có datatable.net => đang bug do thứ tự load elements của blogger khác biệt???
              document.querySelectorAll('table:not(.dataTable)').forEach(table => {
               // Xóa border nếu có (dù là "1" hay giá trị khác)
                if (table.hasAttribute('border')) {
                  table.removeAttribute('border');
                }
                // Thêm class ai-table
                table.classList.add('ai-table', 'table-hover-combo');
              });
        });//END DOMContentLoaded
    //]]>
    </script>
</b:if>