html - 对齐表格内的两个嵌套表格

Question

为了家庭作业，我正在创建一个算法来格式化数学。我在对齐东西时遇到了很多麻烦。无论如何，问题是当我尝试结合两个功能时。让我告诉你我的意思:

例如我有积分函数:

<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 并删除 float 可能是最简单的方法。无论如何， float 应该做什么？

<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/