天天看点

Table rules 属性

Table 对象

定义和用法

rules 属性可设置或返回表格的内部边线。

语法

设置 rules 属性:

tableObject.rules="none|groups|rows|cols|all"

返回 rules 属性:

tableObject.rules

描述
none 没有内部边界
groups 显示行组和列组之间的内部边界
rows 显示内部行之间的边界
cols 显示的列之间内部边界
all 显示行和列之间的内边界

浏览器支持

Table rules 属性
Table rules 属性
Table rules 属性
Table rules 属性
Table rules 属性

所有主要浏览器都支持 rules 属性

注意:

IE9可以正确显示此属性。早期版本的IE

除了内部四个边界外,还会添加四个外边界。

Chrome 和 Safari 可以正确显示此属性: 除了内边框外还会影响外边框。

实例

下面的例子设置了表格的两种不同的内部边线:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<script>

function rows(){

    document.getElementById('myTable').rules="rows";

}

function cols(){

    document.getElementById('myTable').rules="cols";

</script>

</head>

<body>

<table id="myTable">

<tr>

        <td>cell 1</td>

        <td>cell 2</td>

</tr>

        <td>cell 3</td>

        <td>cell 4</td>

</table>

<br>

<button type="button" onclick="rows()">只显示行边界</button>

<button type="button" onclick="cols()">只显示列边界</button>

<p><b>注意:</b> rules属性在Internet Explorer 9之前版本不能正常显示。</p>

</body>

</html>

Table 对象