div#container
{
   width: 550px;
   position: relative;
   margin: 0 auto 0 auto;
   text-align: left;
}
body
{
   background-color: #7F7F7F;
   background-image: url('images/WH2026.jpg');
   background-attachment: fixed;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 100% 100%;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   text-align: center;
}
  /* 1. สร้างกรอบครอบเพื่อคุมขนาด */
  .looker-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 300%; /* ปรับอัตราส่วนความสูงต่อความกว้าง */
    border: 1px solid #ddd;
    border-radius: 8px;
    -webkit-overflow-scrolling: touch; /* ให้การเลื่อนบน iOS ลื่นไหล */
  }

  /* 2. บังคับให้ iFrame ยืดเต็มกรอบ */
  .looker-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }

  /* 3. ปรับแต่งสำหรับหน้าจอมือถือโดยเฉพาะ */
  @media screen and (max-width: 600px) {
    .looker-container {
      padding-top: 200%; /* เพิ่มความสูงในแนวตั้งให้มองเห็นข้อมูลตารางได้มากขึ้น */
    }
  }