html - Centered, boxed math(s) equations -


i'm trying make centered, boxed math(s) equations using mathml part of html5. problem boxes. if put border on div element, border tall enough, extends way left , right sides of screen. if put border on math element, right width, isn't tall enough elements inside multiline table.

<div align="center" style="border: 1px solid #000;">   <math style="border: 1px solid #000;"><mi>x</mi><mfenced open="{" close=""><mtable>     <mtr><mtd><mtext>row 1</mtext></td></mtr>     <mtr><mtd><mtext>row 2</mtext></td></mtr>   </mtable></mfenced></math> </div> 

why elements have such strange sizes? shouldn't both size of contents? how can create box big enough contain text, without giving element explicit size?

(apologies lack of image. uploaded one, don't have proper reputation post it.)

thanks.

<div> block element, hence fill complete width of current parent box. set use display: inline-block; fit width of content:

<div align="center" style="border: 1px solid #000; display: inline-block;">   <math><mi>x</mi><mfenced open="{" close=""><mtable>     <mtr><mtd><mtext>row 1</mtext></mtd></mtr>     <mtr><mtd><mtext>row 2</mtext></mtd></mtr>   </mtable></mfenced></math> </div> 

example fiddle


besides, in code use </td> instead of </mtd>.


Comments

Popular posts from this blog

jquery - How do you format the date used in the popover widget title of FullCalendar? -

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -