home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

การควบคุมเลย์เอาต์ตารางใน CSS

คุณสมบัติ table-layout ใน CSS ใช้สำหรับกำหนดอัลกอริทึมที่จะถูกใช้โดยเบราว์เซอร์สำหรับการจัดวางแถว คอลัมน์ และเซลล์ของตาราง ผ่านนี้ คุณสามารถควบคุมเลย์เอาต์ตารางได้

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติ CSS table-layout ดังนี้:

Selector {    table-layout: /*value*/ }

ตัวอย่างต่อไปนี้แสดงคุณสมบัติ CSS table-layout:

ตัวอย่าง

<!DOCTYPE html> <html> <head> <style> table {    margin: 2em;    display: inline-block;    border: 1px solid black; } td {    border: 1px solid black; } #one {    table-layout: auto;    width: auto; } #one + table {    table-layout: fixed;    width: 100px; } </style> </head> <body> <h2>Table Layouts and its working in CSS</h2> <table id="one"> <caption>Cricketers</caption> <tr> <td>ShaneWarne</td> </tr> <tr> <td></td> <td>Adam</td> </tr> <tr> <td></td> <td>Shimron Hetmyer</td> <td></td> </tr> </table> <table> <caption>Cricketers</caption> <tr> <td>ShaneWarne</td> </tr> <tr> <td></td> <td>Adam</td> </tr> <tr> <td></td> <td>Shimron Hetmyer</td> <td></td> </tr> </table> </body> </html>

ผลลัพธ์

ได้ผลลัพธ์ดังนี้:

การควบคุมเลย์เอาต์ตารางใน CSS

ตัวอย่างเพิ่มเติม

<!DOCTYPE html> <html> <head> <style> div {    margin: auto;    width: 50%;    box-shadow: inset 0 0 14px orange; } td {    box-shadow: inset 0 0 5px lime;    white-space: nowrap;    outline: thin dotted; } table {    border: 3px solid black;    table-layout: fixed;    width: 100%; } </style> </head> <body> <div> <table> <caption>Demo Caption</caption> <tr> <td>ABCD</td> </tr> <tr> <td></td> <td>EFGH</td> </tr> <tr> <td></td> <td>IJKLM NOPQRST</td> <td></td> </tr> </table> </div> </body> </html>

ผลลัพธ์

ได้ผลลัพธ์ดังนี้:

การควบคุมเลย์เอาต์ตารางใน CSS