table-layout
試一試
table-layout: auto;
width: 150px;
table-layout: fixed;
width: 150px;
table-layout: auto;
width: 100%;
table-layout: fixed;
width: 100%;
<section class="default-example" id="default-example">
<table class="transition-all" id="example-element">
<tr>
<th>Name</th>
<th>Location</th>
</tr>
<tr>
<td>Lion</td>
<td>Africa</td>
</tr>
<tr>
<td>Norwegian Lemming</td>
<td>Europe</td>
</tr>
<tr>
<td>Seal</td>
<td>Antarctica</td>
</tr>
<tr>
<td>Tiger</td>
<td>Asia</td>
</tr>
</table>
</section>
table {
border: 1px solid #113399;
}
th,
td {
border: 2px solid #aa1199;
padding: 0.25rem 0.5rem;
}
語法
css
/* Keyword values */
table-layout: auto;
table-layout: fixed;
/* Global values */
table-layout: inherit;
table-layout: initial;
table-layout: revert;
table-layout: revert-layer;
table-layout: unset;
值
auto-
使用自動錶格佈局演算法。表格及其單元格的寬度會根據內容進行調整。大多數瀏覽器預設使用此演算法。
fixed-
使用固定表格佈局演算法。使用此關鍵字時，表格的寬度需要使用
width屬性顯式指定。如果width屬性的值設定為auto或未指定，瀏覽器將使用自動錶格佈局演算法，在這種情況下，fixed值無效。
固定表格佈局演算法比自動佈局演算法更快，因為表格的水平佈局僅取決於表格的寬度、列的寬度以及邊框或單元格間距。水平佈局不取決於單元格的內容，因為它僅取決於顯式設定的寬度。在固定表格佈局演算法中，每列的寬度確定如下：
- 具有顯式寬度的列元素設定該列的寬度。
- 否則，第一行中具有顯式寬度的單元格確定該列的寬度。
- 否則，該列從共享的剩餘水平空間獲取寬度。
使用此演算法，一旦第一行表格資料被下載和分析，整個表格就可以被渲染。這可以比“自動”佈局方法加快渲染時間，但後續單元格內容可能無法適應提供的列寬。單元格使用
overflow屬性來確定是否裁剪任何溢位內容，但僅當表格具有已知寬度時；否則，它們不會溢位單元格。
正式定義
正式語法
table-layout =
auto |
fixed
示例
帶文字溢位的固定寬度表格
此示例使用固定表格佈局，結合 width 屬性，來限制表格的寬度。text-overflow 屬性用於對過長而不適合的單詞應用省略號。如果表格佈局是 auto，即使指定了 width，表格也會增長以適應其內容。
HTML
html
<table>
<tr>
<td>Ed</td>
<td>Wood</td>
</tr>
<tr>
<td>Albert</td>
<td>Schweitzer</td>
</tr>
<tr>
<td>Jane</td>
<td>Fonda</td>
</tr>
<tr>
<td>William</td>
<td>Shakespeare</td>
</tr>
</table>
CSS
css
table {
table-layout: fixed;
width: 120px;
border: 1px solid red;
}
td {
border: 1px solid blue;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
結果
規範
| 規範 |
|---|
| 層疊樣式表級別 2 # 寬度佈局 |
瀏覽器相容性
載入中…