add table header

3 files changed, 28 insertions, 1 deletions

diff --git a/index.html b/index.html
index d0da373..2d28e96 100644
--- a/index.html
+++ b/index.html
@@ -26,6 +26,15 @@
 
       <button id='csv-download'>download</button>
       <table id='pnit-results'>
+        <thead>
+          <tr>
+            <th>sequence 1</th>
+            <th>sequence 2</th>
+            <th>identity</th>
+          </tr>
+        </thead>
+        <tbody>
+        </tbody>
       </table>
     </x-pnit-form>
 
diff --git a/main.css b/main.css
index b6ae759..9ce6e35 100644
--- a/main.css
+++ b/main.css
@@ -2,6 +2,24 @@ form {
     margin-bottom: 2ex;
 }
 
+table {
+    border-collapse: collapse;
+    border: 1px solid black;
+}
+
+thead {
+    border-bottom: 1px solid black;
+}
+
+th, td {
+    border: 1px solid black;
+    padding: 2px 5px;
+}
+
+td:last-child {
+    text-align: right;
+}
+
 input[name='pni-threshold'] {
     text-align: right;
 }
diff --git a/pnit-form.mjs b/pnit-form.mjs
index 50624c0..baef44d 100644
--- a/pnit-form.mjs
+++ b/pnit-form.mjs
@@ -35,7 +35,7 @@ export default class extends HTMLElement {
     }
 
     get resultTable() {
-        return document.getElementById('pnit-results');
+        return this.querySelector('#pnit-results tbody');
     }
 
     connectedCallback() {