/*** ตาราง ***/
.table-ctn{
  width: 100%;
  font-size: var(--fs-table)
}
table {
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
}

th {
  /* background-color: var(--main-mid); */
  background-color: #ddd;
  color: dodgerblue;
  padding: 3px 0;
}
/* td {
  padding: 0 3px;
} */

th, td {
  /* border: 1px solid var(--main-dark); */
  border: 1px solid #ccc;
  overflow: hidden;
}

table tbody tr:hover {
  background-color: var(--main-dark);
}
table thead th:hover {
  background-color: var(--main-dark);
}




/**************** จอขนาดกลาง ****************/
@media screen and (max-width: 768px) {

  /*** ตารางแบบ Fix 1 Column ***/
  .table-ctn{
    overflow-x: auto;
    overflow-y: auto;
  }
  table{  
    width: 100%; 
    border-spacing: 1px; 
    border-collapse: separate;
    table-layout: auto;
  }

  th, td {
    /* border: 1px solid #ccc; */
    padding: 1px;
    white-space: nowrap; 
    outline: 1px solid var(--main-dark);
  }
  

  /*

  th{
    background-color:var(--main-dark);
  }
  thead tr:first-child th:first-child {
    background-color:var(--main-dark);
  }

  */


  /* Scroll fix */
  thead th:first-child,
  tbody td:first-child{
    position: sticky;
    z-index: 10; 
    background-color: inherit;
    overflow: hidden;
    white-space: nowrap;
  }

  thead th:first-child,
  table tbody td:first-child {
    left: 0;
  }

  thead th:first-child{
    z-index: 12; 
  }

  th, td {
    font-size: 0.95rem;
  }
}




/**************** จอขนาดเล็ก ****************/
@media screen and (max-width: 480px) {
  th, td {
    font-size: 0.85rem;
  }
}