Table Example: Styling and Additional Rows (pull #561)

For issue #242, complete table.css and add two more rows to the example table.
w3c · Dec 7, 2017 · 3be59e5 · 3be59e5
1 parent 346556b
commit 3be59e5
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git a/examples/table/css/table.css b/examples/table/css/table.css
@@ -2,3 +2,35 @@
 	font-style: italic;
 	color: #366ED4;
 }
+
+[role="table"] {
+  display: table;
+}
+
+[role="table"] > div[id] {
+  display: table-caption;
+  font-style: italic;
+}
+
+[role="table"] [role="row"] {
+  display: table-row;
+}
+
+[role="table"] [role="cell"],
+[role="table"] [role="columnheader"] {
+  display: table-cell;
+  padding: 0.125em 0.25em;
+  width: 8em;
+}
+
+[role="table"] [role="columnheader"] {
+  font-weight: bold;
+  border-bottom: thin solid #888;
+}
+
+[role="table"] [role="rowgroup"]:last-child [role="row"]:nth-child(odd) {
+  background-color: #ddd;
+}
+
+
+
diff --git a/examples/table/table.html b/examples/table/table.html
@@ -61,6 +61,18 @@ <h2 id="ex_label">Example</h2>
             <span role="cell">Acme, Inc.</span>
             <span role="cell">123 Broad St.</span>
           </div>
+          <div role="row">
+            <span role="cell">Ralph</span>
+            <span role="cell">Jefferson</span>
+            <span role="cell">XYZ, Inc.</span>
+            <span role="cell">456 Main St.</span>
+          </div>
+          <div role="row">
+            <span role="cell">Nancy</span>
+            <span role="cell">Jensen</span>
+            <span role="cell">XYZ, Inc.</span>
+            <span role="cell">456 Main St.</span>
+          </div>
         </div>
       </div>
     </div>