天天看點

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 對象