adds in data attributes to each col. Isn't right just yet.

Specifically not working for nested tables just yet. Also, need to look at paragraph tables with no headers - padding adjusts for headers even when there are none...

src/lib/_imports/elements/table--basic.css

@@ -206,23 +206,43 @@ table p:last-child,
 
   /* To label the cells */
   /* RFE: Add `data-label` to each cell so we can use `attr(data-label)` */
-  td:nth-of-type(1):before {
-    content: "ID";
+  td[data-col-1]:before {
+    content: attr(data-col-1);
   }
 
-  td:nth-of-type(2):before {
-    content: "Name";
+  td[data-col-2]:before {
+    content: attr(data-col-2);
   }
 
-  td:nth-of-type(3):before {
-    content: "Size";
+  td[data-col-3]:before {
+    content: attr(data-col-3);
   }
 
-  td:nth-of-type(4):before {
-    content: "Time";
+  td[data-col-4]:before {
+    content: attr(data-col-4);
   }
 
-  td:nth-of-type(5):before {
-    content: "Actions";
+  td[data-col-5]:before {
+    content: attr(data-col-5);
+  }
+
+  td[data-col-6]:before {
+    content: attr(data-col-6);
+  }
+
+  td[data-col-7]:before {
+    content: attr(data-col-7);
+  }
+
+  td[data-col-8]:before {
+    content: attr(data-col-8);
+  }
+
+  td[data-col-9]:before {
+    content: attr(data-col-9);
+  }
+
+  td[data-col-10]:before {
+    content: attr(data-col-10);
   }
 }

src/lib/_imports/elements/table/table.hbs

@@ -1,6 +1,6 @@
 <table class="{{#if table }}has-table{{/if}} {{#if class }}{{ class }}{{/if}}">
   {{#if caption }}
-  <caption>{{{ caption }}}</catpion>
+  <caption>{{{ caption }}}</caption>
   {{/if}}
   {{#if data.cols }}
   <thead>
@@ -18,25 +18,25 @@
   {{/each}}
   {{#each data.rows}}
     <tr>
-      {{#if id}}<td>{{ id }}</td>{{/if}}
-      {{#if name}}<td>{{ name }}</td>{{/if}}
-      {{#if name-link}}<td><a href="#">{{ name-link }}</a></td>{{/if}}
+      {{#if id}}<td data-col-1="ID">{{ id }}</td>{{/if}}
+      {{#if name}}<td data-col-2="Name">{{ name }}</td>{{/if}}
+      {{#if name-link}}<td data-col-2="Name"><a href="#">{{ name-link }}</a></td>{{/if}}
       {{#if paragraph}}
-      <td title="{{> @text-of-one-paragraph-short }}">
+      <td data-col-3="Summary" title="{{> @text-of-one-paragraph-short }}">
         <p>{{> @text-of-one-paragraph-short }}</p>
       </td>
       {{/if}}
       {{#if sentence}}
-      <td title="{{> @text-of-one-sentence }}">
+      <td data-col-4="Sentence" title="{{> @text-of-one-sentence }}">
         <span>{{> @text-of-one-sentence }}</span>
       </td>
       {{/if}}
-      {{#if custom-1}}<td>{{{ custom-1 }}}</td>{{/if}}
-      {{#if custom-2}}<td>{{{ custom-2 }}}</td>{{/if}}
-      {{#if custom-3}}<td>{{{ custom-3 }}}</td>{{/if}}
-      {{#if time}}<td><time>{{ time }}</time></td>{{/if}}
+      {{#if custom-1}}<td data-col-5="Size">{{{ custom-1 }}}</td>{{/if}}
+      {{#if custom-2}}<td data-col-6="">{{{ custom-2 }}}</td>{{/if}}
+      {{#if custom-3}}<td data-col-7="">{{{ custom-3 }}}</td>{{/if}}
+      {{#if time}}<td data-col-8="Time"><time>{{ time }}</time></td>{{/if}}
       {{#if acts}}
-      <td>
+      <td data-col-9="Actions">
         <ul>
         {{#each acts}}
           {{#if is-link }}<li><a href="#">{{ text }}</a></li>{{/if}}