Style terms table

assets/main.css

@@ -56,11 +56,32 @@ body {
         text-decoration: none;
     }
 
-.class-section,
-.term-dl {
-    padding-top: 70px;
+.class-group,
+.term-definition {
+        padding-top: 70px; /* Avoid anchor links from sticking to the top */
         margin-top: -70px;
-}
+    }
+    .class-group .well h2 {
+        margin-top: 10px;
+    }
+    .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

@@ -82,26 +82,35 @@
 #def showTerm($t, $isProperty)
     #if $t.uri is not None
         #if $isProperty 
-            <dl id="$t.name_simple" class="dl-horizontal term-dl">
+            <div id="$t.name_simple" class="term-definition">
+                <table class="table table-bordered table-condensed">
+                <tbody>
         #else
-            <dl class="dl-horizontal class-dl">
+            <div class="class-definition">
+                <table class="table table-bordered table-condensed">
+                <tbody>
         #end if
-    <dt>Name</dt><dd>$t.name</dd>
-    <dt>Label</dt><dd>$t.label</dd>
-    <dt>Identifier</dt><dd><a href="$t.uri">$t.uri</a></dd>
+                    <colgroup>
+                        <col />
+                        <col />
+                    </colgroup>
+                    <tr><td colspan="2">$t.name</td></tr>
+                    <tr><td>Label</td><td>$t.label</td></tr>
+                    <tr><td>Identifier</td><td><a href="$t.uri">$t.uri</a></td></tr>
                     #if $isProperty
-    <dt>Class</dt><dd>$t.class</dd>
+                    <tr><td>Class</td><td>$t.class</td></tr>
                     #end if
-    <dt>Definition</dt><dd>$t.definition</dd>
-    <dt>Comment</dt><dd>$t.comment</dd>
-    <dt>Reference</dt><dd><a href="http://terms.tdwg.org/wiki/$t.name_prefixed">http://terms.tdwg.org/wiki/$t.name_prefixed</a></dd>
-    <dt>History</dt><dd><a href="$t.version">$t.version</a></dd>
-</dl>
+                    <tr><td>Definition</td><td>$t.definition</td></tr>
+                    <tr><td>Comment</td><td>$t.comment</td></tr>
+                    <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>
+            </div>
     #end if
 #end def
-
                     #for $group in $groups
-                    <section id="$group.name_simple" class="class-section">
+                    <section id="$group.name_simple" class="class-group">
                         <header class="well">
                             <h2>$group.name</h2>
                             <ul class="list-inline term-index">