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属性的作用及使用详解

 以前看过不少css的用法,但对于一些不叫少用的属性没有怎么看过,今天在经典上看贴,发现了一个对“怎么用CSS强制TD不换行?”话题的讨论,发现了table-layout这个属性的使用详解,先贴出来内...
  • JOHNCOOLS
  • JOHNCOOLS
  • 2006年06月22日 15:19
  • 6899

android layout属性介绍

android:id 为控件指定相应的ID android:text 指定控件当中显示的文字,需要注意的是,这里尽量使用strings.xml文件当中的字符串  android:gravity...
  • macong01
  • macong01
  • 2012年03月08日 21:50
  • 25286

css table-layout 、border-collapse属性

tableLayout 属性用来显示表格单元格、行、列的算法规则。 table { table-layout:fixed; } 值描述automatic默认。列宽度由单元格内...
  • gtlishujie
  • gtlishujie
  • 2017年04月20日 14:56
  • 379

table中的table-layout属性

●默认情况下,table的宽度和高度是由内容决定的,如果定义了宽高,会按定义的宽高设定,比如: table { width:500px; } ●table-layout属性: a...
  • LAMP_zy
  • LAMP_zy
  • 2017年04月01日 15:17
  • 396

Android布局-LinearLayout属性详解

介绍安卓中常用的LinearLayout布局的相关属性的使用以及注意事项:1.排列方式orientation 2.摆放位置gravity 3.分割线showDividers 4.基线baselineA...
  • Android_yh
  • Android_yh
  • 2016年05月17日 10:10
  • 8777

LinearLayout布局属性

e安教育 2016-11-22 13:53 LinearLayout布局时有三种属性可能会经常遇到,并且还是不好理解的,所以特意拿出来说一下。 1.gravity 1.1 gravi...
  • u011277123
  • u011277123
  • 2016年11月28日 09:43
  • 205

TableLayout布局详解

Android TableLayout中的使用说明 TableLayout特点:        1)TableLayout和我们平时在网页上见到的Table有所不同,TableLayout...
  • u011506413
  • u011506413
  • 2016年05月22日 17:04
  • 10164

table-layout属性fixed和auto的区别

定义: table-layout属性fixed和auto的区别 h1{font-size:16px;font-family:Arial
  • CodingNoob
  • CodingNoob
  • 2017年08月23日 11:05
  • 640

CoordinatorLayout 属性详解 和 Behavior 的使用

关于 CoordinatorLayout 写过例子  点击打开链接 链接是以前写的联动效果的例子,但是一直没有总结,其实CoordinatorLayout就是一个联动的布局动画效果,不用代码,就xm...
  • WangRain1
  • WangRain1
  • 2017年04月27日 11:59
  • 2617

TabLayout属性详解

首先在代码中获取tablayout控件,然后通过代码的方式添加签: tablayout.addTab(tablayout.newTab().setText("tab"+i))...
  • qq_34247200
  • qq_34247200
  • 2017年02月14日 14:30
  • 1070
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS中table-layout属性的作用及使用详解
举报原因:
原因补充:

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