I'm trying to make centered, boxed math(s) equations using MathML as part of HTML5. The problem is the boxes. If I put a border on my div element, the border is tall enough, but it extends all the way to the left and right sides of the screen. If I put a border on my math element, it is the right width, but isn't tall enough for the elements inside the 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 do the elements have such strange sizes? Shouldn't they both be the size of their contents? How can I create a box just big enough to contain the text, without giving any element an explicit size?
(Apologies for the lack of an image. I uploaded one, but I don't have the proper reputation to post it.)
Thanks.
<div> is a block element, hence it will fill the complete width of the current parent box. You could just set it to use display: inline-block; to fit the width of its 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>
Besides, in your code you use </td> instead of </mtd>.