Use <a> anchors and .dwc-table

assets/main.css

@@ -52,31 +52,34 @@ body {
         text-decoration: none;
     }
 
-.class-group,
+.anchor {
-.term-definition {
+    display: block; 
-        padding-top: 70px; /* Avoid anchor links from sticking to the top */
+    position: relative; 
-        margin-top: -70px;
+    top: -70px; 
+    visibility: hidden; }
+}
+
+.class-group .well h2 {
+    margin-top: 10px;
+}
+
+.dwc-table {
+    table-layout: fixed;
     }
-    .class-group .well h2 {
+    .dwc-table col:first-child {
-        margin-top: 10px;
+        width: 120px; /* Labels */
+    }
+    .dwc-table.class-definition tr { /* Class definitions */;
+        background-color: #f5f5f5;
+    }
+    .dwc-table tr:first-child { /* Header for each definition */
+        background-color: #e7e7e7;
+        font-size: 16px;
+        font-weight: bold;
+    }
+    .dwc-table td {
+        word-wrap: break-word;
     }
-    .class-group .table {
-        table-layout: fixed;
-        }
-        .class-group .table col:first-child {
-            width: 120px; /* Labels */
-        }
-        .class-group .class-definition .table tr { /* Class definitions */;
-            background-color: #f5f5f5;
-        }
-        .class-group .table tr:first-child { /* Header for each definition */
-            background-color: #e7e7e7;
-            font-size: 16px;
-            font-weight: bold;
-        }
-        .class-group .table td {
-            word-wrap: break-word;
-        }
 
 @media screen and (max-width: 767px){
     .terms-sidebar {

build/terms.tmpl

@@ -81,11 +81,10 @@
 #def showTerm($t, $isProperty)
     #if $t.uri is not None
         #if $isProperty 
-            <div id="$t.name" class="term-definition">
+            <a class="anchor" id="$t.name"></a>
-                <table class="table table-bordered table-condensed">
+            <table class="table table-bordered table-condensed dwc-table term-definition">
         #else
-            <div class="class-definition">
+            <table class="table table-bordered table-condensed dwc-table class-definition">
-                <table class="table table-bordered table-condensed">
         #end if
                 <colgroup>
                     <col />
@@ -103,12 +102,12 @@
                     <tr><td>Reference</td><td><a href="http://terms.tdwg.org/wiki/$t.name_prefixed">http://terms.tdwg.org/wiki/$t.name_prefixed</a></td></tr>
                     <tr><td>History</td><td><a href="$t.version">$t.version</a></td></tr>
                 </tbody>
-                </table>
+            </table>
-            </div>
     #end if
 #end def
                     #for $group in $groups
-                    <section id="$group.name" class="class-group">
+                    <section class="class-group">
+                        <a class="anchor" id="$group.name"></a>
                         <header class="well">
                             <h2>$group.name</h2>
                             <ul class="list-inline">