fix(css): table and header layout, closes #2874 (#2896)

apps/readest-app/src/utils/style.ts

@@ -165,6 +165,11 @@ const getColorStyles = (
     p img, span img, sup img {
       mix-blend-mode: ${isDarkMode ? 'screen' : 'multiply'};
     }
+    table {
+      max-width: calc(var(--available-width));
+      overflow: auto;
+      table-layout: fixed;
+    }
     /* code */
     body.theme-dark code {
       ${isDarkMode ? `color: ${fg}cc;` : ''}
@@ -326,9 +331,6 @@ const getLayoutStyles = (
     ${!vertical && overrideLayout ? `margin-top: ${paragraphMargin}em !important;` : ''}
     ${!vertical && overrideLayout ? `margin-bottom: ${paragraphMargin}em !important;` : ''}
   }
-  h1, h2, h3, h4, h5, h6 {
-    text-align: initial;
-  }
 
   :lang(zh), :lang(ja), :lang(ko) {
     widows: 1;
@@ -795,7 +797,7 @@ export const applyTableStyle = (document: Document) => {
           const widthUnit = widthStr.replace(widthValue.toString(), '').trim();
 
           if (widthUnit === 'px' || !widthUnit) {
-            rowWidth += widthValue + 6;
+            rowWidth += widthValue;
           } else if (widthUnit === '%') {
             rowWidth += (window.innerWidth * widthValue) / 100;
           }