Fixes #2565: Improved rendering of Markdown tables

CHANGELOG.md

@@ -4,6 +4,7 @@ v2.4.8 (FUTURE)
 
 * [#2473](https://github.com/digitalocean/netbox/issues/2473) - Fix encoding of long (>127 character) secrets
 * [#2558](https://github.com/digitalocean/netbox/issues/2558) - Filter on all tags when multiple are passed
+* [#2565](https://github.com/digitalocean/netbox/issues/2565) - Improved rendering of Markdown tables
 * [#2575](https://github.com/digitalocean/netbox/issues/2575) - Correct model specified for rack roles table
 
 ---

netbox/project-static/css/base.css

@@ -390,6 +390,19 @@ table.report th a {
     top: -51px;
 }
 
+/* Rendered Markdown */
+.rendered-markdown table {
+    width: 100%;
+}
+.rendered-markdown th {
+    border-bottom: 2px solid #dddddd;
+    padding: 8px;
+}
+.rendered-markdown td {
+    border-top: 1px solid #dddddd;
+    padding: 8px;
+}
+
 /* AJAX loader */
 .loading {
     position: fixed;

netbox/templates/circuits/circuit.html

@@ -131,7 +131,7 @@
             <div class="panel-heading">
                 <strong>Comments</strong>
             </div>
-            <div class="panel-body">
+            <div class="panel-body rendered-markdown">
                 {% if circuit.comments %}
                     {{ circuit.comments|gfm }}
                 {% else %}

netbox/templates/circuits/provider.html

@@ -129,7 +129,7 @@
             <div class="panel-heading">
                 <strong>Comments</strong>
             </div>
-            <div class="panel-body">
+            <div class="panel-body rendered-markdown">
                 {% if provider.comments %}
                     {{ provider.comments|gfm }}
                 {% else %}

netbox/templates/dcim/device.html

@@ -290,7 +290,7 @@
                 <div class="panel-heading">
                     <strong>Comments</strong>
                 </div>
-                <div class="panel-body">
+                <div class="panel-body rendered-markdown">
                     {% if device.comments %}
                         {{ device.comments|gfm }}
                     {% else %}

netbox/templates/dcim/devicetype.html

@@ -164,7 +164,7 @@
             <div class="panel-heading">
                 <strong>Comments</strong>
             </div>
-            <div class="panel-body">
+            <div class="panel-body rendered-markdown">
                 {% if devicetype.comments %}
                     {{ devicetype.comments|gfm }}
                 {% else %}

netbox/templates/dcim/rack.html

@@ -164,7 +164,7 @@
             <div class="panel-heading">
                 <strong>Comments</strong>
             </div>
-            <div class="panel-body">
+            <div class="panel-body rendered-markdown">
                 {% if rack.comments %}
                     {{ rack.comments|gfm }}
                 {% else %}

netbox/templates/dcim/site.html

@@ -230,7 +230,7 @@
             <div class="panel-heading">
                 <strong>Comments</strong>
             </div>
-            <div class="panel-body">
+            <div class="panel-body rendered-markdown">
                 {% if site.comments %}
                     {{ site.comments|gfm }}
                 {% else %}

netbox/templates/tenancy/tenant.html

@@ -87,7 +87,7 @@
             <div class="panel-heading">
                 <strong>Comments</strong>
             </div>
-            <div class="panel-body">
+            <div class="panel-body rendered-markdown">
                 {% if tenant.comments %}
                     {{ tenant.comments|gfm }}
                 {% else %}

netbox/templates/virtualization/cluster.html

@@ -99,7 +99,7 @@
             <div class="panel-heading">
                 <strong>Comments</strong>
             </div>
-            <div class="panel-body">
+            <div class="panel-body rendered-markdown">
                 {% if cluster.comments %}
                     {{ cluster.comments|gfm }}
                 {% else %}

netbox/templates/virtualization/virtualmachine.html

@@ -143,7 +143,7 @@
             <div class="panel-heading">
                 <strong>Comments</strong>
             </div>
-            <div class="panel-body">
+            <div class="panel-body rendered-markdown">
                 {% if virtualmachine.comments %}
                     {{ virtualmachine.comments|gfm }}
                 {% else %}