<!-- Start Content -->
<!DOCTYPE html>

<html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<html lang="en">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css"
    integrity="sha512-jRcyS0JzoOe9Mq3OEn5Q+U67/l7o+f+B2dG1mVWmHJ+ud7M9XmFmB7GJj6o4b4Yl+SGoSyKkfcf1FbzN1Sd9zA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kanit&display=swap" rel="stylesheet">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
      h1 {
        font-family: 'Kanit', sans-serif;
        color: #36618D;
      }
      .row border border-primary needs-validation mt-5 {
        
      }

        .box {
          width: 20%;
          height: 120px;
          border-radius: 10px;
          margin-right: 10px;
          background-color: #ffffff;
          display: inline-block;
        }

        .col{
           lift: 405px;
            width: 1040px;
            height: auto;
            margin: 0 auto;           
            background: #ffffff;

        }

        .container{
            margin: 0 auto;
            font-family: 'Kanit', sans-serif;
        }

        .table-bordered {
    border: 10px solid #dee2e6;ฃ
  }

  .table-bordered th,
  .table-bordered td {
    border: 10px solid #dee2e6;
    border-top-width: 0;
    border-left-width: 0;
  }

  .table-bordered thead th:first-child,
  .table-bordered td:first-child {
    border-left-width: 2px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  .table-bordered thead th:last-child,
  .table-bordered td:last-child {
    border-right-width: 2px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  .table-bordered thead th,
  .table-bordered td {
    vertical-align: middle;
  }

  .col-2 input[type="text"] {

      border: none;
      border-bottom: 1px solid black;
      border-radius: 0px;
      text align:center;
    }

    .form-control:disabled, .form-control[readonly] {
    background-color: #ffffff;
}


      </style>
      
</head>

<body style="background-color:#F8F7FA">

    <br> <!-- จำเป็นต้องมี -->
    <br> <!-- จำเป็นต้องมี -->
    <br> <!-- จำเป็นต้องมี -->
        <h1 class="m-5">อนุมัติสมาชิก</h1>

    <div class="container">
    
        <div class="container">
        
        <div class="row">
          <div class="card" style="border-=100px solid black">
            
            <div class="row">
                <div class="col-2 text-center">
                    <input type="text" class="form-control" placeholder="ทั้งหมด" aria-label="Disabled input example" disabled>
                  </div>
                  <div class="col-2 text-center">
                    <input type="text" class="form-control" placeholder="อนุมัติแล้ว" aria-label="Disabled input example" disabled>
                  </div>
                  <div class="col-2 text-center">
                    <input type="text" class="form-control" placeholder="รออนุมัติ" aria-label="Disabled input example" disabled>
                  </div>
                  <div class="col-2">
                    
                  </div>
              <div class="col-4">
                <input type="text" class="form-control" placeholder="ค้นหา">
              </div>
            </div>
            <table class="table mt-3">
              <thead>
                <tr>
                  <th>วันที่สมัคร</th>
                  <th>ชื่อ-นามสกุล</th>
                  <th>ประเภท</th>
                  <th> <div class="">อนุมัติแล้ว <br> รออนุมัติ</div></th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>01/01/2566</td>
                  <td>นาย สมศักดิ์ ใจดี</td>
                  <td>สามัญ</td>
                  <td></td>
                  <td></td>

                </tr>
                <tr>
                    <td>01/01/2566</td>
                    <td>นาย สมศักดิ์ ใจดี</td>
                    <td>สามัญ</td>
                    <td></td>
                    <td></td>
  
                </tr>
                <tr>
                    <td>01/01/2566</td>
                    <td>นาย สมศักดิ์ ใจดี</td>
                    <td>สามัญ</td>
                    <td></td>
                    <td></td>
  
                </tr>
              </tbody>
            </table>
            <div class="d-grid gap-2 d-md-flex justify-content-md-end m-3">
                <button class="btn btn-primary" type="button">ก่อนหน้า</button>
                <button class="btn btn-primary" type="button">1</button>
                <button class="btn btn-primary" type="button">2</button>
                <button class="btn btn-primary" type="button">3</button>
                <button class="btn btn-primary" type="button">4</button>
                <button class="btn btn-primary" type="button">5</button>
                <button class="btn btn-primary" type="button">ถัดไป</button>
              </div>
          </div>
        </div>
    </div>
    
</body>

</html>