CSS控制表格居中(使用expression)

Pader2007年4月7日 发表于 网页与编程 css 表格 居中

控制表格居中最常见的方式就是设置其align属性为center,而在css中是找不到align的,于是控制table父级元素的text-align属性就成了一种普遍的替代方案。

    例如,可以给该table外套上一个宽度为100%的表格,该表格只包含一个td,然后设置这个td的text-align属性为center就可以了。

    还可以给该table外套一个div,控制该div的text-align属性。

    或者在table外加上<center>标签。

    如果只是想让所有网页内容居中的话,可以在css中设置body{text-align:center;}。

    但这都是替代方案,并非从根本上控制了table的对齐方式,其实利用css中的expression完全可以实现。

在css中定义一个伪类:
.myTableCenter{myalign:expression(this.align="right");}
然后在该table中引用就可以了:
<table class="myTableCenter" ......</table>

下面是完整的html演示代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>css控制表格居中演示</title>
<style type="text/css">
<!--
.table_center {
 background-color: #0000ff;
 border:1px solid #222222;
 myalign:expression(this.align="center"); 
}

.table_left {
 background-color: #ff0000;
 border:1px solid #222222; 
}

-->
</style></head>

<body>
<table width="500" border="0" cellpadding="0" cellspacing="0" class="table_center">
  <tr>
    <td>center</td>
  </tr>
</table>
<br>
<table width="500" border="0" cellpadding="0" cellspacing="0" class="table_left">
  <tr>
    <td>left</td>
  </tr>
</table>
</body>

评论 共有 0 条评论

暂无评论,快发表你的评论吧。