styling for morphology table

app/styles/app.scss

@@ -5,6 +5,8 @@
 
 @import "components/words";
 
+@import "components/table";
+
 #page_header {
   margin-bottom: 0;
 /*  background-image: url("/assets/images/banner_bkg.png"); */

app/styles/components/table.scss

@@ -0,0 +1,19 @@
+#morph {
+	border-collapse: collapse;
+	width: auto;
+}
+
+#morph td, #morph th {
+	border: 1px solid #ddd;
+	padding: 6px;
+}
+
+#morph th {
+	background-color:#85AB40;
+	color:white;
+	font-weight:bold;
+}
+
+#morph tr:nth-child(even){background-color: #f2f2f2;}
+
+#morph tr:hover {background-color: #ddd;}

app/templates/morph-legend.hbs

@@ -1,6 +1,6 @@
 <div class="container mt-5">
   <h2>Morphology Codes and Descriptions</h2>
-  <table style="width:100%">
+  <table id="morph">
     <tr><th>Morph Code</th><th>Description</th></tr>
     <tr><td>A-APF-C</td><td>Adjective Accusative Plural Feminine Comparative</td></tr>
     <tr><td>A-APF-NUI</td><td>Adjective Accusative Plural Feminine NUmerical Indiclinable (A)</td></tr>