FF下 用 col 隐藏表格列的方法详解！
程序员文章站
2023-10-13 23:18:36
今天，我在一个有52个字段的报表时，迫使我深入的做了一下研究， 我发现： col在ff下的display 的默认值是：table-column vis...
今天，我在一个有52个字段的报表时，迫使我深入的做了一下研究，
我发现：
col在ff下的display 的默认值是：table-column
visibility的默认值为：visible
我又查查了css手册，发现 visibility 有一个 collapse的可选值，据说在ie下是没有实现的，ie没实现不竺于ff没有实现，就像ff不支持的不一定ie不支持一样。
bt的我，一个一个试了一遍，
终于发现了！
ff下可以用下面的方法，用col把表格的列给隐藏！
欢呼！
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table width="100%" border="0">
<colgroup>
<col style="visibility: collapse;overflow:hidden;width:0px;" />
<col style="visibility: collapse;overflow:hidden;width:0px;" />
<col style="display:none"/>
<col style="display:none"/>
</colgroup>
<tr>
<td scope="col">ie下，你可以看到这列<td scope="col">ie下，你可以看到这列
<td scope="col">ff下，你可以看到这列<td scope="col">ff下，你可以看到这列</tr>
<tr>
<td scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
我发现：
col在ff下的display 的默认值是：table-column
visibility的默认值为：visible
我又查查了css手册，发现 visibility 有一个 collapse的可选值，据说在ie下是没有实现的，ie没实现不竺于ff没有实现，就像ff不支持的不一定ie不支持一样。
bt的我，一个一个试了一遍，
终于发现了！
ff下可以用下面的方法，用col把表格的列给隐藏！
欢呼！
复制代码 代码如下:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table width="100%" border="0">
<colgroup>
<col style="visibility: collapse;overflow:hidden;width:0px;" />
<col style="visibility: collapse;overflow:hidden;width:0px;" />
<col style="display:none"/>
<col style="display:none"/>
</colgroup>
<tr>
<td scope="col">ie下，你可以看到这列<td scope="col">ie下，你可以看到这列
<td scope="col">ff下，你可以看到这列<td scope="col">ff下，你可以看到这列</tr>
<tr>
<td scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
下一篇： css别忘记清除浮动clear:both