Responsive Design for MathJax and Tables
Websites that require mathematics and tables increasingly need to be usable on mobile devices; an article on this site for an arcane accounting topic is pulled up on cell phones and tablets surprisingly frequently. Presumably, in the middle of a meeting of an accounting team meeting near the end of the quarter, someone starts frantically searching on “level yield loan fee amortization” and comes up with the article Effective Interest (Yield) Loan Fee Amortization. This article includes both a very wide table that originally caused iPhones to choose a font that was about 2 points or so. I found a way to force a smaller font for tables only based upon the screen resolution, but this was not entirely satisfactory, as the MathJax formula line-length still forced a small font size.
After some months of intermittent searching, I finally found the markup that makes tables and MathJax formulas usable on mobile devices:
<div style="overflow-x:auto;">
<table>
</table>
</div>
or in the case of MathJax,
<div style="overflow-x:auto;">
MathJax markup
</div>
Table Example
The table below is enclosed in the <div style="overflow-x:auto;"> block as shown above:
| Level Yield Amortization Detailed Calculation | Level Yield | Level Yield Simplified Calculation | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Period | Principal | Payment | Interest | Applied Principal | Fee Balance | Fee Pseudo Payment | Fee Pseudo Interest | Applied Fee Principal Amortization Expense | Level Yield Asset | Yield After Fee Amortization | Amortization Expense Reduction to Contract Yield | Simplified Calculation of Amortization Expense Reduction to Contract Yield | Simplified Calculation of Amortization Expense |
| 0 | $10,000.00 | -$198.01 | $58.33 | -$139.68 | $1,000.00 | -$19.80 | $5.83 | -$13.97 | $11,000.00 | 6.36 | 0.64 | 0.64 | -$13.97 |
| 1 | $9,860.32 | -$198.01 | $57.52 | -$140.49 | $986.03 | -$19.80 | $5.75 | -$14.05 | $10,846.35 | 6.36 | 0.64 | 0.64 | -$14.05 |
| 2 | $9,719.83 | -$198.01 | $56.70 | -$141.31 | $971.98 | -$19.80 | $5.67 | -$14.13 | $10,691.81 | 6.36 | 0.64 | 0.64 | -$14.13 |
MathJax Example
The MathJax output below is enclosed in the <div style="overflow-x:auto;"> block as shown above: