CSS中table-layout属性的作用及使用详解

转载 2006年06月22日 15:19:00
 以前看过不少css的用法,但对于一些不叫少用的属性没有怎么看过,今天在经典上看贴,发现了一个对“怎么用CSS强制TD不换行?”话题的讨论,发现了table-layout这个属性的使用详解,先贴出来内容:
table-layout  版本:CSS2  兼容性:IE5+ 继承性:无
语法:
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:fixed 属性的用法

table-layout:fixed 属性的用法: 如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情况下),以达到使过长的文字 不撑破表格的目...

table-layout:fixed 属性的解说,IE、Firefox效果对比详解

[出处]   http://www.yici.net/content/text_all/text_0/311_1.html   这管文章比较实用,解决了一些问题。     table-layout:f...
  • tmeteor
  • tmeteor
  • 2013年07月22日 13:36
  • 631

Table Layout in CSS mobi

  • 2017年10月06日 08:11
  • 9.61MB
  • 下载

Table.Layout.in.CSS.2016.6.pdf

  • 2016年08月01日 18:30
  • 3.81MB
  • 下载

CSS2中display:table属性的用法详解

想必大家都已经知道了css属性display的一些常见属性值,比如none,block,inline-block等等,今日我在看一个效果代码的时候,碰到一个之前从未使用过的属性值,就是它了,displ...

Table Layout in CSS epub

  • 2017年10月06日 08:09
  • 4.5MB
  • 下载

Table Layout in CSS 无水印pdf

  • 2017年10月06日 08:13
  • 3.79MB
  • 下载

CSS里面的behavior属性的作用是什么,怎么使用

CSS里面的behavior属性的作用是什么,怎么使用 2011-08-30 15:39  在进行CSS网页布局的时候,我们经遇到刷新要保留表单里内容的时候,习惯的做法使用cookie,...
  • A_post
  • A_post
  • 2011年09月09日 23:59
  • 1045

extjs 常用控件的使用 table layout

  • 2014年05月13日 10:42
  • 3.4MB
  • 下载

Android布局中的layout_weight和weightSum属性的详解及使用

由于Android设备的尺寸大小不一,种类繁多,当我们在开发应用的时候就要考虑屏幕的适配型了,尽可能让我们的应用适用于主流机型的尺寸,这样我们的应用不会因为尺寸不同而不美观,解决屏幕适配问题的方法有很...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS中table-layout属性的作用及使用详解
举报原因:
原因补充:

(最多只允许输入30个字)