ข้ามไปที่เนื้อหาหลัก

การใช้ CSS ตรึงส่วนหัวข้อของตาราง HTML ด้วย style position: sticky



<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th {
    position: sticky;
    top: 0;
    background-color: #ffffff; /* สีพื้นหลังหัวตาราง */
    z-index: 10; /* ทำให้หัวตารางอยู่บนสุด */
  }
</style>

<table border=1>
  <thead>
    <tr>
      <th>หัวข้อ 1</th>
      <th>หัวข้อ 2</th>
      <th>หัวข้อ 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>
    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>
    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>
   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>
   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>   <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td>ข้อมูล 3</td>
    </tr>
    <!-- เพิ่มข้อมูลอื่นๆ -->
  </tbody>
</table>





PHP CI MANIA - PHP Code Generator 

โปรแกรมช่วยสร้างโค้ด "ลดเวลาการเขียนโปรแกรม"
ราคาสุดคุ้ม  
http://www.phpcodemania.com

ความคิดเห็น

ค้นหาในเว็บไซต์

เนื้อเพลงที่ได้รับความนิยม ในรอบสัปดาห์

ค้นหาบล็อกนี้