CSS table-layout用法及代碼示例

CSS中的table-layout屬性用於顯示表的布局。

用法:

table-layout:auto|fixed|initial|inherit;

屬性值：

auto:它用於在瀏覽器上設置自動表格布局。此屬性通過單元格中牢不可破的內容設置列寬。
fixed:它用於設置固定的表格布局。表格和列的寬度由表格和col的寬度或單元格第一行的寬度設置。其他行中的單元格不影響列寬。如果第一行沒有寬度，則根據表的內容在表中平均劃分列寬。
initial:用於設置其默認值。
inherit:它用於從其父項繼承屬性。

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>table-layout property</title> 
        <style> 
            table { 
              border-collapse:collapse; 
              border:1px solid black; 
            }  
            th, td { 
              border:1px solid black; 
            } 
            table#table1 { 
              table-layout:auto; 
              width:200px;   
            } 
              
            table#table2 { 
              table-layout:fixed; 
              width:200px;   
            } 
            div { 
                max-width:200px; 
                padding:10px; 
                border:1px solid black; 
            } 
            h1 { 
                color:green; 
            } 
        </style> 
    </head> 
    <body> 
        <center> 
        <h1>GeeksforGeeks</h1> 
        <h2>table-layout property</h2> 
        <div> 
        <h3>table-layout:auto;</h3> 
        <table id = "table1"> 
            <tr> 
                <th>Author Name</th> 
                <th>Age</th> 
                <th>College</th> 
            </tr> 
            <tr> 
                <td>RaviPratap Singh</td> 
                <td>24</td> 
                <td>GFG</td> 
            </tr> 
            <tr> 
                <td>Rakesh Singh</td> 
                <td>25</td> 
                <td>GEEKS</td> 
            </tr> 
        </table></div><br> 
        <div> 
        <h3>table-layout:fixed;</h3> 
        <table id = "table2"> 
            <tr> 
                <th>Author Name</th> 
                <th>Age</th> 
                <th>College</th> 
            </tr> 
            <tr> 
                <td>RaviPratap Singh</td> 
                <td>24</td> 
                <td>GFG</td> 
            </tr> 
            <tr> 
                <td>Rakesh Singh</td> 
                <td>25</td> 
                <td>GEEKS</td> 
            </tr> 
        </table> 
        </div> 
        </center> 
    </body> 
</html>

輸出：

支持的瀏覽器：下麵列出了table-layout屬性支持的瀏覽器：

穀歌瀏覽器14.0
Internet Explorer 5.0
Firefox 1.0
Safari 1.0
Opera 7.0

相關用法

注：本文由純淨天空篩選整理自Mahadev99大神的英文原創作品 CSS | table-layout Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。