ช่วยแก้ไข Layout หน้า `รายชื่อพนักงานทั้งหมด` ให้ตารางแสดงผลเหมือนกับหน้า `ประวัติการอบรม`

ปัญหาปัจจุบัน:

- ตารางของหน้ารายชื่อพนักงานล้นออกด้านขวา
- Header และ Column ของตารางดูกว้างเกิน container
- ต้องการให้ตารางอยู่ใน Card เหมือนหน้าประวัติการอบรม
- ให้ Scroll เฉพาะภายในตาราง ไม่ให้ดัน Layout ทั้งหน้า

สิ่งที่ต้องการให้แก้:

1. ครอบตารางด้วย container ที่มี `overflow-hidden`
2. เพิ่ม wrapper สำหรับตารางด้วย `overflow-x-auto`
3. ใช้ `Table` แบบ `w-full table-fixed`
4. กำหนดความกว้างของแต่ละคอลัมน์ให้เหมาะสม
5. ใช้ `truncate` กับข้อความยาว เช่น ชื่อพนักงาน ฝ่าย และตำแหน่ง
6. จัด Header กลุ่ม `ชั่วโมงการอบรม (ชม.)` ให้ไม่ทำให้ตารางล้น
7. ให้ดีไซน์ สี เส้นขอบ ระยะห่าง และความสูงของแถว ใกล้เคียงกับหน้า `ประวัติการอบรม`
8. ปุ่ม Search, Filter, View และ Pagination ไม่ต้องเปลี่ยน Logic เดิม
9. ห้ามแก้ Business Logic, API, Query หรือข้อมูลที่ดึงมา
10. แก้เฉพาะ Layout / CSS / className / Table structure เท่านั้น

โครงสร้างที่ต้องการโดยประมาณ:

```tsx
<Card className="overflow-hidden">
  <CardContent className="p-0">
    <div className="overflow-x-auto">
      <Table className="w-full table-fixed">
        <TableHeader>...</TableHeader>
        <TableBody>...</TableBody>
      </Table>
    </div>
  </CardContent>
</Card>
```

ตัวอย่างแนวทาง Column Width:

```tsx
<TableHead className="w-[120px]">รหัสพนักงาน</TableHead>
<TableHead className="w-[220px]">ชื่อพนักงาน</TableHead>
<TableHead className="w-[160px]">ฝ่าย</TableHead>
<TableHead className="w-[160px]">ตำแหน่ง</TableHead>
<TableHead className="w-[100px] text-center">อนุมัติแล้ว</TableHead>
<TableHead className="w-[100px] text-center">รอตรวจสอบ</TableHead>
<TableHead className="w-[100px] text-center">ไม่อนุมัติ</TableHead>
<TableHead className="w-[100px] text-center">รวมชั่วโมง</TableHead>
```

ตัวอย่างการจัด Header กลุ่ม:

```tsx
<TableRow>
  <TableHead colSpan={4}></TableHead>
  <TableHead colSpan={4} className="text-center border-l">
    ชั่วโมงการอบรม (ชม.)
  </TableHead>
</TableRow>
```

ตัวอย่างการป้องกันข้อความยาวดันตาราง:

```tsx
<TableCell className="truncate">
  <div className="truncate">{employee.name}</div>
</TableCell>
```

ผลลัพธ์ที่ต้องการ:

- ตารางไม่ล้นหน้าจอ
- Layout เหมือนหน้า `ประวัติการอบรม`
- Table อยู่ใน Card สวยงาม
- มี horizontal scroll เฉพาะเมื่อจำเป็น
- Responsive มากขึ้น
- Header และ Body align ตรงกัน