`
jarod2008
  • 浏览: 81016 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css-table 布局

阅读更多

<table width="600px" align="center" border="0" cellspacing="0" cellpadding="0" >

<tr><td></td></tr>

</table>

 

等价地,用css

<table class="table-1">

<tr>

    <td></td>

</tr>

</table>

 

其中,css定义如下

.table-1{

    width:600px;

    border-collapse:collapse;

    margin:auto;

}

 

另外,table的其他css定义如下:

 

 

border-collapse

语法:
border-collapse : separate | collapse
 
参数:
 
separate :  边框独立(标准HTML)
rtl :  相邻边被合并

 


 

border-spacing


 
语法:
 
border-spacing : length || length
 
参数:
 
length :  由浮点数字和单位标识符组成的长度值。不可为负值。请参阅长度单位
 
 
示例:
 
table { border-collapse: separate; border-spacing: 10px; }

 

 

caption-side


 
语法:
 
caption-side : bottom | left |right | top
 
参数:
 
bottom :  下面
left :  左边
right :  右边
top :  下面
 
示例:
 
table caption { caption-side: top; width: auto; text-align: left; }

 

 

empty-cells


 
语法:
 
empty-cells : hide | show
 
参数:
 
hide :  隐藏
show :  显示
 
示例:
 
table { caption-side: top; width: auto; border-collapse: separate; empty-cells: hide; }

 

 

 

table-layout


 
语法:
 
table-layout : auto | fixed
 
参数:
 
auto :  默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
fixed :  固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关  
 
示例:
 
table { table-layout: auto; }

 

 

speak-header


 
语法:
 
speak-header : once | always
 
参数:
 
once :  所有的单元格只有一个表格头
fixed :  每一组单元格对应一个表头
 
示例:
 
table { speak-header: once }

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics