วิธีการ ทำตาราง ด้วย bootstrap เพื่อความสวยงาม ทำตารางย่อตามหน้าจอได้

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
MBMoo
PHP VIP Members
PHP VIP Members
โพสต์: 25351
ลงทะเบียนเมื่อ: 04/06/2020 10:05 am

วิธีการ ทำตาราง ด้วย bootstrap เพื่อความสวยงาม ทำตารางย่อตามหน้าจอได้

โพสต์ที่ยังไม่ได้อ่าน โดย MBMoo »

วิธีการ ทำตาราง ด้วย bootstrap เพิ่อความสวยงาม ซึ่งเป็นเป็นการออกแบบ โดยใช้ css อย่างหนึ่ง ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML เพื่อเป็นการตกแต่งและออกแบบให้สวยงาม

โค้ด: เลือกทั้งหมด

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
import 2 ลิ้งนี้มาใส่ไว้ที่ head ก่อนนะคะ ถึงจะใช้ bootstrap ได้


โค้ด: เลือกทั้งหมด

      <table class="table">
                        <thead>
                            <tr>
                                <th scope="col" ></th>
                                <th scope="col" >test04</th>
                                <th scope="col" >คนที่มองหา</th>

                            </tr>
                        </thead>
                        <tbody>

                            <tr>

                                <td>ออกกำลังกาย</td>
                                <td>ไม่ได้ออกกำลังกาย</td>
                                <td>ไม่มีคำตอบ</td>
                            </tr>
                            <tr>

                                <td>กีฬาที่ชอบ</td>
                                <td>เจ็ทสกี,ตะกร้อ</td>
                                <td></td>
                            </tr>

                            <tr>

                                <td>งานอดิเรก</td>
                                <td>ไม่มีคำตอบ</td>
                                <td></td>
                            </tr>
                            <tr>

                                <td >เล่นดนตรี เต้นรำ</td>
                                <td ></td>
                                <td ></td>
                            </tr>

                        </tbody>
                    </table>
เป็นรูปแบบของ table นะคะ

โค้ด: เลือกทั้งหมด

            <thead>
                            <tr>
                                <th scope="col" ></th>
                                <th scope="col" >test04</th>
                                <th scope="col" >คนที่มองหา</th>

                            </tr>
                        </thead>
ส่วน thead จะเป็นส่วนของหัวข้อนะคะ

โค้ด: เลือกทั้งหมด

                    <tr>

                                <td>ออกกำลังกาย</td>
                                <td>ไม่ได้ออกกำลังกาย</td>
                                <td>ไม่มีคำตอบ</td>
                            </tr>
tr บันทัดแนวนอนนะคะ ส่วน td จะเป็นแนวตั้ง

ผลลัพธ์
Booststap Knowledge-1.png
Booststap Knowledge-1.png (19.62 KiB) Viewed 2689 times


หากต้องการที่จะเรียนรู้ css เพิ่มเติม ด้วย bootstrap วิธีการสร้าง nav-tabs โดย bootstrap viewtopic.php?f=76&t=67936 สามารถดูวิธีการทำอื่นๆ มากมายได้จาก Booststap Knowledge viewforum.php?f=76
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 25