将两个嵌套表对齐到表中

Question

用于家庭作业我正在创建一个算法来格式化数学。我在调整内容方面遇到了很多麻烦。无论如何问题是当我尝试组合两个功能时。让我告诉你我的意思：

例如我有函数Integral：

<table class="integral" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td valign="bottom" align="center">
            8
        </td>
        <td valign="center" rowspan="3">
            <table>
                <tr>
                    <td>
                        &nbsp;&nbsp; x+3+
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr valign="top">
        <td>
            <div style="margin-top: -50%; font-weight: lighter;">
                <span style="font-size: 300%;">&int;</span></div>
        </td>
    </tr>
    <tr>
        <td valign="top" align="center">
            0
        </td>
    </tr>
</table>

呈现为：

另一个例子是分裂：

<style>
    td.upper_line
    {
        border-top: solid 1px black;
    }
    table.fraction
    {
        text-align: center;
        vertical-align: middle;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        line-height: 2em;
    }
</style>

<table class="fraction" align="center"  cellpadding="0" cellspacing="0" style="float:left; margin-left:20px;">
    <tr>

        <td nowrap="nowrap">
            <i>x</i><sup>2</sup> + <i>x</i> + 1 + y
        </td>
    </tr>
    <tr>
        <td class="upper_line">
            2 cos(<i>x</i>)
        </td>
    </tr>
</table>

呈现为：

我在组合两个功能时遇到了麻烦。例如，我想附加到整体划分。换句话说，我想最终得到类似的东西：

我知道我可以使用绝对定位并使用坐标来解决问题。但我想能够使它工作，无论每个功能包含什么数据。就像前两个例子一样。例如，对于分部，您可以更改文本，分割线将相应增长...

当我将分区表放在整数表中时，我得到：

<table class="integral" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td valign="bottom" align="center">
            8
        </td>
        <td valign="center" rowspan="3">
            <table>
                <tr>
                    <td>
                        &nbsp;&nbsp; x+3+
                        <table class="fraction" align="center"  cellpadding="0" cellspacing="0" style="float:left; margin-left:20px;">
    <tr>

        <td nowrap="nowrap">
            <i>x</i><sup>2</sup> + <i>x</i> + 1 + y
        </td>
    </tr>
    <tr>
        <td class="upper_line">
            2 cos(<i>x</i>)
        </td>
    </tr>
</table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr valign="top">
        <td>
            <div style="margin-top: -50%; font-weight: lighter;">
                <span style="font-size: 300%;">&int;</span></div>
        </td>
    </tr>
    <tr>
        <td valign="top" align="center">
            0
        </td>
    </tr>
</table>

Answer 1

我有点不同意kitgui.com你不应该在这里使用表格。它们是最简单的渲染类似公式的方法。但是，除非您需要支持IE6，否则可以使用display: table-*属性呈现非表格HTML，这是您应该考虑的内容。

更重要的是，可以更一致地使用CSS，并删除cellpadding，cellspacing，(v)align等属性，内联样式和不间断空格。

对于你的问题：简单地将你的内部表放入它自己的td并放弃浮动是最简单的。无论如何，假设的浮动是什么？

<td>
  &nbsp;&nbsp; x+3+
</td>
<td>
  <table class="fraction" align="center"  cellpadding="0" cellspacing="0" style="margin-left:20px;">
  <tr>
    <td nowrap="nowrap">
        <i>x</i><sup>2</sup> + <i>x</i> + 1 + y
    </td>
  </tr>
  <tr>
    <td class="upper_line">
        2 cos(<i>x</i>)
    </td>
  </tr>
  </table>
</td>

编辑：顺便说一句，我就是这样做的：http://jsfiddle.net/vY7TD/4/

Answer 2

该表格将显示在它之前的任何非浮动元素下方。您可以使用float:left将“x + 3”包裹在一个范围内，或者使用display:inline代替float:left。