fix

my-blog/static/css/style.css

@@ -690,16 +690,6 @@ article.article-content {
 }
 
 /* Override for actual comments - this is a workaround */
-.article-body pre code span[style*="color:#65737e"]:first-child:before {
-    content: attr(data-comment);
-}
-
-/* Detect comments by position and content pattern */
-.article-body pre code span[style*="color:#65737e"] {
-    color: #F8F8F2 !important; /* Environment variables = white */
-}
-
-/* Only style as comment if the line actually starts with # */
 .article-body pre code > span:first-child[style*="color:#65737e"] {
     color: #88846F !important; /* Real comments = gray */
 }
@@ -1840,7 +1830,6 @@ article.article-content {
     font-weight: 600;
 }
 
-
 button.ask-at-btn {
   margin: 10px;
   background: var(--theme-color);
@@ -1854,3 +1843,83 @@ button.ask-at-btn a {
 button#searchButton.pds-btn {
 	background: var(--theme-color);
 }
+
+/* Table Styles */
+.article-body table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 20px 0;
+    font-size: 15px;
+    line-height: 1.6;
+    color: #333;
+    border: 1px solid #ddd;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    border-radius: 8px;
+    overflow: hidden; /* Ensures rounded corners apply to content */
+}
+
+.article-body th,
+.article-body td {
+    padding: 12px 15px;
+    text-align: left;
+    border-bottom: 1px solid #ddd;
+}
+
+.article-body thead {
+    background-color: #f2f2f2;
+    color: #333;
+}
+
+.article-body th {
+    font-weight: 600;
+}
+
+.article-body tbody tr:nth-child(odd) {
+    background-color: #f9f9f9;
+}
+
+.article-body tbody tr:hover {
+    background-color: #f1f1f1;
+}
+
+/* Responsive Table */
+@media screen and (max-width: 600px) {
+    .article-body table {
+        border: 0;
+    }
+
+    .article-body table thead {
+        display: none;
+    }
+
+    .article-body table tr {
+        margin-bottom: 10px;
+        display: block;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+    }
+
+    .article-body table td {
+        border-bottom: 1px solid #ddd;
+        display: block;
+        text-align: right;
+        padding-left: 50%;
+        position: relative;
+    }
+
+    .article-body table td::before {
+        content: attr(data-label);
+        position: absolute;
+        left: 15px;
+        width: calc(50% - 30px);
+        padding-right: 10px;
+        white-space: nowrap;
+        text-align: left;
+        font-weight: 600;
+        color: #555;
+    }
+
+    .article-body table td:last-child {
+        border-bottom: 0;
+    }
+}