html - 为什么我的表格没有对齐？

Question

我正在我们的 Web 应用程序中开发一个新页面，但我真的不是 Web 设计师。为了使它与我们相当过时的设计原则保持一致，我们在表中有表。

最终，此页面由一个表组成，其中一行包含两个 <TD>元素。在每个<TD>是另一张 table 。左列的表格包含一堆行，每行 4 列。右列的表大约有 8 列，行数与左列一样多。这是它的样子:

我大部分时间都对右侧的外观感到满意，只是它们应该被推得更靠右，但我想我稍后会担心这个。我担心的是为什么左边和边上的一切都被揉成一团。下拉控件(使用 Telerik 的 Kendo UI 创建)被切断，即使没有 <BR />，小信息图标也位于下拉菜单下方。标签或任何东西。

左列的前几行是这样写的:

<table>
    <tr>
        <td colspan="4">Admission</td>
    </tr>
    <tr>
        <td colspan="4">Section B - ...</td>
    </tr>
    <tr>
        <td>BB0700.&nbsp;</td>
        <td>Some Text...</td>
        <td class="textalign-right">&nbsp;&nbsp;</td>
        <td class="textalign-center">
            @(Html.Kendo().DropDownListFor(m => m.ModelFieldName).HtmlAttributes(new { id = "cmbModelFieldName_Tab6", @class = "width-85" })) <img src="..\..\..\..\Content\images\Icons\info_Desc.gif" />
        </td>
    </tr>
    <tr>
        <td>BB0800.&nbsp;</td>
        <td>Some Other Text...</td>
        <td class="textalign-right">&nbsp;&nbsp;</td>
        <td class="textalign-center">
            @(Html.Kendo().DropDownListFor(m => m.ModelOtherFieldName).HtmlAttributes(new { id = "cmbModelOtherFieldName_Tab6", @class = "width-85" })) <img src="..\..\..\..\Content\images\Icons\info_Desc.gif" />
        </td>
    </tr>
    <tr>
        <td colspan="4">&nbsp;</td>
    </tr>
    <tr>
        <td colspan="4">Section C - ...</td>
    </tr>
    <tr>
        <td>C0100.&nbsp;</td>
        <td>More Text?</td>
        <td class="textalign-right">&nbsp;&nbsp;</td>
        <td class="textalign-center">
            @(Html.Kendo().DropDownListFor(m => m.ModelMoreFields).HtmlAttributes(new { id = "cmbModelMoreFields_Tab6", @class = "width-85" }))
            <img src="..\..\..\..\UDSMR.UDSCentral.Web\Content\images\Icons\info_Desc.gif" />
        </td>
    </tr>

然后右边表格的前几行和几列是这样的:

<table>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>One</td>
        <td>&nbsp;</td>
        <td>Two</td>
        <td>&nbsp;</td>
        <td>Three<img src="..\..\..\..\Content\images\Icons\info_Desc.gif" /></td>
    </tr>
    <tr>
        <td>GG0130.&nbsp;</td>
        <td>Some Text</td>
    </tr>
    <tr>
        <td class="textalign-right">A.&nbsp;</td>
        <td>Some Text Field</td>
        <td class="textalign-right">&nbsp;&nbsp;</td>
        <td class="textalign-center">
            @(Html.Kendo().DropDownListFor(m => m.SomeTextField).HtmlAttributes(new { id = "cmbSomeTextField_Tab6", @class = "width-85" }))
        </td>
        <td class="textalign-right">&nbsp;&nbsp;</td>
        <td class="textalign-center">
            @(Html.Kendo().DropDownListFor(m => m.SomeTextField2).HtmlAttributes(new { id = "cmbSomeTextField2_Tab6", @class = "width-85" }))
        </td>
        <td class="textalign-right">&nbsp;&nbsp;</td>
        <td class="textalign-center">
            @(Html.Kendo().DropDownListFor(m => m.SomeTextField3).HtmlAttributes(new { id = "cmbSomeTextField3_Tab6", @class = "width-85" }))
            <img src="..\..\..\..\Content\images\Icons\info_Desc.gif" />
        </td>
    </tr>
    <tr>
        <td class="textalign-right">B.&nbsp;</td>
        <td>Next Field</td>
        <td class="textalign-right">&nbsp;&nbsp;</td>
        <td class="textalign-center">
            @(Html.Kendo().DropDownListFor(m => m.NextField).HtmlAttributes(new { id = "cmbNextField_Tab6", @class = "width-85" }))
        </td>
        <td class="textalign-right">&nbsp;&nbsp;</td>
        <td class="textalign-center">
            @(Html.Kendo().DropDownListFor(m => m.NextField2).HtmlAttributes(new { id = "cmbNextField2_Tab6", @class = "width-85" }))
        </td>
        <td class="textalign-right">&nbsp;&nbsp;</td>
        <td class="textalign-center">
            @(Html.Kendo().DropDownListFor(m => m.NextField3).HtmlAttributes(new { id = "cmbNextField3_Tab6", @class = "width-85" }))
            <img src="..\..\..\..\Content\images\Icons\info_Desc.gif" />
        </td>
    </tr>

总的来说，这些表的定义方式几乎相同。通过 CSS 进行的额外格式化非常少，大部分只是带有 Kendo 控件的普通旧 HTML，而不是 ASP.NET 或“普通”HTML 控件。

我应该注意到数据库没有正确设置，所以它试图绑定(bind)的模型不存在，但这无关紧要。

所以我猜我遇到的问题:

• 为什么右列顶部有大量填充/空白区域？
• 为什么我的下拉菜单在左侧列中被截断了？
• 为什么 (i) 图片显示在下拉列表下方？

我已经尝试查看我们的布局几乎相同的类似网页，但我无法确定我可能做错了什么。

Answer 1

正如评论所说，没有那么多表格，您将花费更少的时间来做这件事。最好是使用像 bootstrap 这样的框架。但我认为你可以在不改变你的方法的情况下做出你想要的，将左右表格放在一个 div 中。

<div style="width: 100%">
<div style="width: 50%;float:left">
    <table>
        <tr>
            <th>Col1</th><th>Col2</th><th>Col3</th><th>Col4</th>
        </tr>
        <tr>
            <td>LeftTable</td><td>LeftTable</td><td>LeftTable</td><td>LeftTable</td>
        </tr>
        <tr>
            <td>LeftTable</td><td>LeftTable</td><td>LeftTable</td><td>LeftTable</td>
        </tr>
        <tr>
            <td>LeftTable</td><td>LeftTable</td><td>LeftTable</td><td>LeftTable</td>
        </tr>
        <tr>
            <td>LeftTable</td><td>LeftTable</td><td>LeftTable</td><td>LeftTable</td>
        </tr>
    </table>
</div>
<div style="width: 50%;float:left">
    <table>
        <tr>
            <th>Col1</th><th>Col2</th><th>Col3</th><th>Col4</th><th>Col5</th><th>Col6</th><th>Col7</th><th>Col8</th>
        </tr>
        <tr>
            <td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td>
        </tr>
        <tr>
            <td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td>
        </tr>
        <tr>
            <td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td>
        </tr>
        <tr>
            <td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td>
        </tr>
        <tr>
            <td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td>
        </tr>
        <tr>
            <td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td>
        </tr>
        <tr>
            <td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td>
        </tr>
        <tr>
            <td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td><td>RightTable</td>
        </tr>
    </table>
</div>

这使得两个表适合相同的空间。您可以更改 div 的百分比，使一个比另一个宽。