0

When rendering math containing only letters and other symbols without ascenders (e.g. "x") inside a <td> tag, the text does not align on the baseline (tested with Chrome 56 and Firefox 52 on Windows 1.

Example:

<html>
<head>
    <script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>
    <style>
        td {border:1pt solid gray;}
        table {border-collapse: collapse;}
    </style>
</head>
<body>
<table><tr>
<td>reference</td>
<td>\(x\)</td>
<td>\(x\)x</td>
<td>\(xx\)</td>
<td>\(\cdot\)</td>
<td>\(\cdot t\)</td>
<td>\(=\)</td>
<td>\(=t\)</td>
</tr></table>
</body>
<html>

render of example

Is there an easy way to correct this?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Christoph Frings
  • 427
  • 4
  • 14

1 Answers1

1

You will get better results if you use 

td {
  border:1pt solid gray;
  vertical-align: baseline;
}

since the default vertical alignment for table cells is middle, and the mathematics produced by MathJax have tight bounding boxes, so center vertically based on those heights.

Davide Cervone
  • 11,211
  • 1
  • 28
  • 48
  • Well that is totally unexpected, I didn't even consider the possibility that td's are not baseline aligned. Thx for the answer. – Christoph Frings Apr 01 '17 at 22:39
  • I think the idea is that if a table cell wraps and so has several lines, while another has only one, then they will be aligned in their middles rather than having the short cell's text be at the very top of the cell. – Davide Cervone Apr 01 '17 at 23:54