©
本文档使用
php中文网手册 发布
table-layout：auto | fixed
默认值：auto
适用于：table系元素
继承性：有
动画性：否
计算值：指定值
auto：默认的自动算法。布局将基于各单元格的内容，换言之，可能你给某个单元格定义宽度为100px，但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来，速度很慢
fixed：固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。也就是说，内容可能被裁切
通常fixed算法会比auto算法高效，尤其是对于那些长表格来说。fixed算法使得表格可以像其它元素一样一行一行的渲染。
对应的脚本特性为tableLayout。
| Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+ |
<section id="bd">
<section id="syntax" class="g-mod g-attr">
<h2 class="tit">语法：</h2>
<div class="cont">
<p><strong>table-layout</strong>：auto | fixed</p>
<p><strong>默认值</strong>：<mark class="defaultvalue">auto</mark></p>
<p><strong>适用于</strong>：table系元素</p>
<p><strong>继承性</strong>：有</p>
<p><strong>动画性</strong>：否</p>
<p><strong>计算值</strong>：指定值</p>
</div>
</section>
<section id="value" class="g-mod g-attr">
<h2 class="tit">取值：</h2>
<div class="cont">
<dl>
<dt>auto：</dt>
<dd>默认的自动算法。布局将基于各单元格的内容，换言之，可能你给某个单元格定义宽度为100px，但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来，速度很慢</dd>
<dt>fixed：</dt>
<dd>固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。也就是说，内容可能被裁切</dd>
</dl>
</div>
</section>
<section id="intro" class="g-mod g-attr">
<h2 class="tit">说明：</h2>
<div class="cont">
<strong>设置或检索表格的布局算法。</strong>
<ul>
<li>通常fixed算法会比auto算法高效，尤其是对于那些长表格来说。fixed算法使得表格可以像其它元素一样一行一行的渲染。</li>
<li>对应的脚本特性为<strong>tableLayout</strong>。</li>
</ul>
</div>
</section>
<section id="compatible" class="g-mod g-attr">
<h2 class="tit">兼容性：</h2>
<div class="cont">
<ul class="support-type">
<li><span class="support">浅绿</span> = 支持</li>
<li><span class="unsupport">红色</span> = 不支持</li>
<li><span class="partsupport">粉色</span> = 部分支持</li>
</ul>
<table class="g-data">
<thead>
<tr>
<th>Values</th>
<th>IE</th>
<th>Firefox</th>
<th>Chrome</th>
<th>Safari</th>
<th>Opera</th>
<th>iOS Safari</th>
<th>Android Browser</th>
<th>Android Chrome</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Basic Support</strong></td>
<td class="support">6.0+</td>
<td class="support">2.0+</td>
<td class="support">4.0+</td>
<td class="support">6.0+</td>
<td class="support">15.0+</td>
<td class="support">6.0+</td>
<td class="support">2.1+</td>
<td class="support">18.0+</td>
</tr>
</tbody>
</table>
</div>
</section>
<section id="example" class="g-mod g-attr">
<h2 class="tit">示例：</h2>
<div class="cont">
<textarea cols="90" rows="10"><!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>table-layout_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
h1{font-size:16px;font-family:Arial;}
.auto{table-layout:auto;width:350px;}
.fixed{table-layout:fixed;width:350px;}
</style>
</head>
<body>
<h1>auto: 表格自动算法</h1>
<table border="1" class="auto">
<tbody>
<tr>
<td>表格自动算法，宽度将基于单元格的内容自动拉伸</td>
<td>表格自动算法</td>
<td>表格自动算法</td>
</tr>
<tr>
<td>表格自动算法</td>
<td>表格自动算法</td>
<td>表格自动算法</td>
</tr>
</tbody>
</table>
<h1>fixed: 表格固定算法</h1>
<table border="1" class="fixed">
<tbody>
<tr>
<td>表格固定算法布局</td>
<td>表格固定算法</td>
<td>表格固定算法</td>
</tr>
<tr>
<td>表格固定算法</td>
<td>表格固定算法</td>
<td>表格固定算法</td>
</tr>
</tbody>
</table>
</body>
</html>
</textarea>
<p><input type="button" value="运行" class="g-btn g-btn-sure"><input type="button" class="g-btn g-btn-copy" value="复制"></p>
</div>
</section>
</section>点击 "运行实例" 按钮查看在线实例