使用table元素的rules属性的HTML 5替代方法是什么?
问题描述:
当使用规则属性此表元素使用table元素的rules属性的HTML 5替代方法是什么?
<table id="data" style="margin-top: 10px;border: 1px solid black; width:100%" rules="all">
我得到以下警告上:
属性(规则)已经过时。在HTML5文档中不鼓励使用它。
什么是HTML 5的替代品呢?
答
是什么
<table rules="">
办?用于指定显示行和列之间的内部边界。此属性已被弃用。 使用CSS来改变表格边框的样式。
所以没有HTML5替代,只是CSS选择:
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 15px;
}
table td {
text-align: center;
}
.frame-box {
border: 1px solid black;
}
.frame-void {
border: none;
}
.rules-none td {
border: none;
}
.rules-all td {
border: 1px solid black;
}
.rules-all td:first-child {
border-left: none;
}
.rules-all td:last-child {
border-right: none;
}
.rules-all tr:first-child td {
border-top: none;
}
.rules-all tr:last-child td {
border-bottom: none;
}
.rules-cols td {
border-left: 1px solid black;
border-right: 1px solid black;
}
.rules-rows td {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.border-2,
.border-2 td {
border-width: 2px;
}
"<TABLE BORDER=2 RULES=NONE FRAME=BOX>"
<table class="rules-none border-2 frame-box">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
"<TABLE BORDER=2 FRAME=VOID RULES=ALL>"
<table class="border-2 frame-void rules-all">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
"<TABLE BORDER=2 RULES=COLS FRAME=BOX>"
<table class="border-2 frame-box rules-cols">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
"<TABLE BORDER=2 RULES=ROWS FRAME=BOX>"
<table class="border-2 frame-box rules-rows">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
如何纳入规则与CSS的不同值? – Potterapple
@Potterapple请检查所有可能性如何将'border'应用于元素。我用示例代码更新了我的答案。 – Justinas