Question

我正在我们的网络应用程序中开发一个新页面，但我真的不是网页设计师。在努力使它与我们过时的设计原则保持一致时，我们在表中的表格中都有表格。

最终，此页面由一个包含两个<TD>元素的单行组成。在每个<TD>中是另一个表。左列的表包含一堆行和每行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>

然后是前几行＆amp;右侧表格中的列是这样的：

<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控件而不是ASP.NET或“vanilla”HTML控件的普通旧HTML。

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

所以我想我遇到的问题是：

为什么右列顶部有大量的填充/空白空间？
为什么我的下拉菜单会在左侧列中被切断？
为什么（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的百分比，使得一个比另一个宽。

为什么我的桌子不对齐？

1 个答案: