$$ \begin{array}{|c|c|c|} \hline &A&B\\ \hline X&1&2\\ \hline Y&3&4\\ \hline \end{array} $$

Code:

$$
\begin{array}{|c|c|c|} \hline
&A&B\\ \hline
X&1&2\\ \hline
Y&3&4\\ \hline
\end{array}
$$

I've looked everywhere but can't seem to find a fix for this. All the tables I write or see written from others have these protruding lines on the right and on the bottom. In the above table, if you'll notice carefully, just on the right of the fourth vertical line you'll see two small protruding horizontal lines. Similarly, just on the bottom of the fourth horizontal line you'll see two small protruding vertical lines.

I do not believe this is the expected behavior of how tables should be displayed. Will this be fixed? Also, until this is fixed, how do I write neat tables without these protrusions?


Also, I have noticed that this code:

$$
\begin{array}{c|c|c|} \hline
&A&B\\ \hline
X&1&2\\ \hline
Y&3&4\\ \hline
\end{array}
$$

produces zero protruding lines:

$$ \begin{array}{c|c|c|} &A&B\\ \hline X&1&2\\ \hline Y&3&4\\ \hline \end{array} $$

but is missing the top and left vertical lines, which is unacceptable. (Based on this I also guess that the extra protrusion in the original table is due to the presence of the very lines which I removed here)


EDIT: Thanks to Nat for noticing this, if you \Huge the second table, and under Math Settings, you Scale All Math to 50%, then you'll also observe the same protrusions in it. Interestingly, the protrusions in the first table will become even longer.

  • 5
    This is interesting. First I thought this might be some CSS bug, and I noticed that removing box-sizing: inherit; from body elements made the first table's lines perfect. But it actually adds a little gap to the second table! I am unable to figure this out further. But I will add that this does not appear to be a MathJax bug. – davidlowryduda Mar 2 at 11:29
  • 2
    Curiously I see the protruding ends on this page (for the middle lines), but not on the Questions preview. I use the HTML-CSS renderer (MathJax settings menu) on Meta Math.SE. – hardmath Mar 2 at 15:10
  • @hardmath Yep, good call. I can confirm the same behavior. – Gaurang Tandon Mar 2 at 15:12
  • 1
    Protrusions are also absent in the Android SE app. – hardmath Mar 2 at 15:38
  • 1
    Yeah, right-clicking the rendered table and --> Math Settings, --> Math Renderer, then switching from the default HTML-CSS to Common HTML fixes it. I guess that that points to CSS? – Nat Mar 3 at 22:51
  • I suggested an edit 2018-02-04 that had a table that now displays incorrectly, though I don't recall it displaying incorrectly at the time. – Nat Mar 3 at 23:04
  • 1
    @Nat Switching to Common HTML fixes the outward protrusion, but then the second table (in my post above) has its horizontal lines slightly shorter, which you can call an "inward protrusion" ;) – Gaurang Tandon Mar 4 at 1:48
  • @Nat Your suggested table displays correctly because your first two columns ("x" and "y") are not separated by a vertical separator line. If they were, the issue of protrusion would arise. – Gaurang Tandon Mar 4 at 1:57
  • 1
    @GaurangTandon The protrusion's there, just very small in the revision history entry. It's far more noticeable in the question. – Nat Mar 4 at 2:03
  • 1
    Found a way to reproduce the protrusions in the second example above: first, wrap it in a \Huge{} function,$$ \Huge{ \begin{array}{c|c|c|} &A&B\\ \hline X&1&2\\ \hline Y&3&4\\ \hline \end{array} } $$, then set zoom to 50% ([right-click], --> Math Settings, --> Scale All Math, 50%. Actually - weird; this works if the TeX code is put into the answer box below, but it doesn't work when rendered in this comment. Ohh, actually it does work for the comment, just gotta use 25% instead of 50%. – Nat Mar 4 at 2:20
  • @Nat Yep, good work, I updated my post according to your detective work ;) – Gaurang Tandon Mar 4 at 2:23
  • 1
    Setting the renderer to SVG apparently makes the problem go away. – celtschk Mar 4 at 9:01
  • @celtschk Great observation! That seems to be working for now. But, SVG renders the table lines in a light grey color instead of the pleasing solid black of the HTML-CSS renderer :( – Gaurang Tandon Mar 4 at 9:06

The issue is that the CSS for this StackExchange site includes

body * {
  box-sizing: inherit;
}

which causes the <span> used by MathJax to produce the frame around the initial table to use box-sizing: border-box rather than box-sizing: content-box. That changes whether the borders are inside or outside its width and height, and because MathJax computes the size based on the border being outside the box, but the CSS sets them to be inside the box, the frame ends up being a little too small.

CSS rules bleeding through to the MathJax output is a common source of layout problems, but it is impossible for MathJax to protect itself against this perfectly. I will start an issue tracker on the MathJax site so that this CSS can be added to the list of resets that MathJax performs.

Adding

.MathJax span {
  box-sizing: content-box;
}

should resolve the issue. @IlmariKaronen, perhaps that can be added to the SOUP script.

  • I am a regular Stylebot user. I set the second CSS you provided to match all domains *.stackexchange.com. And for now, the tables are working great! Thanks :) I'll leave this question unaccepted until the bug actually gets fixed by SE team. – Gaurang Tandon Mar 5 at 12:58

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .