CSS：table-layout属性的作用与使用详解

黄舟原创: 2017-06-30 13:33:24 1452浏览

以前看过不少css的用法，但对于一些不叫少用的属性没有怎么看过，今天在经典上看贴，发现了一个对“怎么用CSS强制TD不换行?”话题的讨论，发现了table-layout这个属性的使用详解，先贴出来内容：

语法：
table-layout : auto | fixed
取值：
auto : 默认值。默认的自动算法。布局将基于各单元格的内容。表格在每一单元格内所有内容读取计算之后才会显示出来
fixed : 固定布局的算法。在这种算法中，表格和列的宽度取决于 col 对象的宽度总和，假如没有指定，则会取决于第一行每个单元格的宽度。假如表格没有指定宽度( width )属性，则表格被呈递的默认宽度为 100% 。

说明：
设置或检索表格的布局算法。
你可以通过此属性改善表格呈递性能。此属性导致IE以一次一行的方式呈递表格内容从而提供给信息用户更快的速度。此属性依据此下顺序使用其中一种方式布置表格栏宽度：
使用 col 或 colGroup 对象的宽度( width )属性信息。
使用表格第一行内的单元格的宽度( width )信息。
依据表格列数等分表格宽度。而不考虑表格内容的实际宽度。
假如单元格的内容超过了列宽度，内容将会被换行。假如无法换行，则内容会被裁切。假如此属性被设置为 fixed ，则 overflow 能够被用于控制处理溢出单元格( td )宽度的内容。假如表格行高度被指定了，那么换行的内容如果超出了指定表格行高度也会在纵向上被裁切。
设置此属性值为 fixed ，有助于提高表格性能。对于长表格效果尤其显著。
设置表格行高可以进一步提高呈递速度，浏览器不需要检测行内每一个单元格内容去确定行高就可以开始解析以及呈递。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

对应的脚本特性为 tableLayout 。

注意到以下几点：
1，你可以通过此属性改善表格呈递性能。此属性导致IE以一次一行的方式呈递表格内容从而提供给信息用户更快的速度。
2，设置此属性值为 fixed ，有助于提高表格性能。对于长表格效果尤其显著。
3，设置表格行高可以进一步提高呈递速度，浏览器不需要检测行内每一个单元格内容去确定行高就可以开始解析以及呈递。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
这个特性对于长表格显示速度及效果来说时非常有用的。可以用来改善表格性能！

对于作者的问题也比较有意思，要求如下：
1,在TD里,不要出现nowrap属性,要想办法把nowrap放到CSS里.
2,TD里,不允许有折行,超过的部份要隐藏!
最终实现方法（注意这里不能加DTD,不然无法实现，不知为何）：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.aa{
    table-layout : fixed;
}
td{
    overflow:hidden;
    height:22px;
}
</style>
</head>

<body>
<!--    var grid1=new JGrid(null,300);  
grid1.create();  var fldsList=new Array(['bag',120],['name',200],['type',100]);  
grid1.createTitle(fldsList);  grid1.tackData("dataLayer")    //-->
<table class="aa" border="1" cellpadding="0" cellspacing="0" bordercolor="#F9F9F9" id="dataLayer">
  <colgroup>
  <col width="119" />
  <col width="199" />
  <col width="99" />
  </colgroup>
  <tbody>
    <tr basestyle="oRowLine2">
      <td>J2SE</td>
      <td>Java 2 Standard Edition </td>
      <td>&nbsp;</td>
    </tr>
    <tr basestyle="oRowLine1">
      <td>J2EE</td>
      <td>Java 2 Enterprise Edition </td>
      <td>&nbsp;</td>
    </tr>
    <tr basestyle="oRowLine2">
      <td>J2ME</td>
      <td>Java 2 Micro Edition </td>
      <td>&nbsp;</td>
    </tr>
    <tr basestyle="oRowLine1">
      <td>GPS</td>
      <td>Global Positioning System </td>
      <td>全球定位系统</td>
    </tr>
    <tr basestyle="oRowLine2">
      <td>CDMA</td>
      <td>Code Division Multiple Access </td>
      <td>码分多址</td>
    </tr>
    <tr basestyle="oRowLine1">
      <td>SMS</td>
      <td>Short Message Service </td>
      <td>短信息服务</td>
    </tr>
    <tr basestyle="oRowLine2">
      <td>BREW</td>
      <td>Binary Runtime Environment for Wireless </td>
      <td>&nbsp;</td>
    </tr>
    <tr basestyle="oRowLine1">
      <td>Symbian</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr basestyle="oRowLine2">
      <td>Windows Mobile Smartphone </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr basestyle="oRowLine1">
      <td>MIDlet</td>
      <td>&nbsp;</td>
      <td>按MIDP规范开发的J2ME应用程序</td>
    </tr>
    <tr basestyle="oRowLine2">
      <td>MIDP</td>
      <td>Mobile Information Device Profile </td>
      <td>移动信息设备框架</td>
    </tr>
    <tr basestyle="oRowLine1">
      <td>Profile</td>
      <td>&nbsp;</td>
      <td>框架/简表</td>
    </tr>
    <tr basestyle="oRowLine2">
      <td>CLDC</td>
      <td>Connected Limited Device Configuration </td>
      <td>标准配置</td>
    </tr>
    <tr basestyle="oRowLine1">
      <td>CDC</td>
      <td>Connected Device Configuration </td>
      <td>&nbsp;</td>
    </tr>
    <tr basestyle="oRowLine2">
      <td>KVM</td>
      <td>K virtual Machine </td>
      <td>&nbsp;</td>
    </tr>
    <tr basestyle="oRowLine1">
      <td>SDK</td>
      <td>Software Development Kit </td>
      <td>软件开发工具包</td>
    </tr>
    <tr basestyle="oRowLine2">
      <td>JAR</td>
      <td>Java ARchive </td>
      <td>&nbsp;</td>
    </tr>
    <tr basestyle="oRowLine1">
      <td>JAD</td>
      <td>Java Application Descriptor </td>
      <td>应用程序描述符</td>
    </tr>
    <tr basestyle="oRowLine2">
      <td>GCF</td>
      <td>General Connection Framework </td>
      <td>&nbsp;</td>
    </tr>
    <tr basestyle="oRowLine1">
      <td>RMS</td>
      <td>Record Management System </td>
      <td>记录管理系统</td>
    </tr>
    <tr basestyle="oRowLine2">
      <td>Sprite</td>
      <td>&nbsp;</td>
      <td>精灵</td>
    </tr>
    <tr basestyle="oRowLine1">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>冲突检查</td>
    </tr>
    <tr basestyle="oRowLine2">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>平铺图层</td>
    </tr>
  </tbody>
</table>
</body>
</html>

以上就是CSS：table-layout属性的作用与使用详解的详细内容，更多请关注php中文网其它相关文章！

table-layout css 样式表 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：IE6 IE7 IE8(Q)不支持empty-cells特性的解决办法下一条：css种table宽度table-layout: fixed如何固定？