css - 什么 HTML 5 替代使用 table 元素的 rules 属性？

Question

在此表元素上使用规则属性时

<table id="data" style="margin-top: 10px;border: 1px solid black; width:100%" rules="all">

我收到以下警告:

Attribute (rules) is obsolete. Its use is discouraged in HTML5 documents.

HTML 5 的替代方案是什么？

Answer 1

From here

What does <table rules=""> do?

Was used to specify the display of internal borders between rows and colums. This attribute has been deprecated. Use CSS to style table borders instead.

因此没有 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>

"&lt;TABLE BORDER=2 FRAME=VOID RULES=ALL&gt;"
<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>

"&lt;TABLE BORDER=2 RULES=COLS FRAME=BOX&gt;"
<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>

"&lt;TABLE BORDER=2 RULES=ROWS FRAME=BOX&gt;"
<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>