Html 为什么我的桌子没有对齐？_Html_Css_Asp.net_Kendo Ui

Html 为什么我的桌子没有对齐？

html css asp.net kendo-ui

Html 为什么我的桌子没有对齐？,html,css,asp.net,kendo-ui,Html,Css,Asp.net,Kendo Ui,我正在我们的web应用程序中开发一个新页面，但我实际上不是一个web设计师。在试图用我们过时的设计原则来保持它的标准化时，我们已经有了一个又一个的表格最终，该页面由一个表组成，其中一行包含两个元素。每个中都有另一个表。左列的表包含一组行和每行4列。右列的表约有8列，行数与左列相同。这就是它看起来的样子：我很高兴看到右手边的样子，除了应该把它们往右边推，但我想我以后会担心的。我所关心的是为什么所有的东西在左边和右边都是如此的拥挤。下拉控件（使用Telerik的剑道UI创建）被切断，小信息图标

我正在我们的web应用程序中开发一个新页面，但我实际上不是一个web设计师。在试图用我们过时的设计原则来保持它的标准化时，我们已经有了一个又一个的表格

最终，该页面由一个表组成，其中一行包含两个

元素。每个

中都有另一个表。左列的表包含一组行和每行4列。右列的表约有8列，行数与左列相同。这就是它看起来的样子：

我很高兴看到右手边的样子，除了应该把它们往右边推，但我想我以后会担心的。我所关心的是为什么所有的东西在左边和右边都是如此的拥挤。下拉控件（使用Telerik的剑道UI创建）被切断，小信息图标位于下拉菜单下，即使没有标签或任何东西

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

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


准许进入
B节-。。。
BB0700。
一些文字。。。
@（Html.Kendo（）.DropDownListFor（m=>m.ModelFieldName）.HtmlAttributes（新的{id=“cmbModelFieldName_Tab6”，@class=“width-85”}））
BB0800。
其他一些文本。。。
@（Html.Kendo（）.DropDownListFor（m=>m.ModelOtherFieldName）.HtmlAttributes（新的{id=“cmbModelOtherFieldName_Tab6”，@class=“width-85”}））
第C节-。。。
C0100。
更多文本？
@（Html.Kendo（）.DropDownListFor（m=>m.ModelMoreFields）.HtmlAttributes（新的{id=“cmbModelMoreFields\u Tab6”，@class=“width-85”}））

右表中的前几行和前几列如下所示：

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


一个
两个
三
GG0130。
一些文本
A.
一些文本字段
@（Html.Kendo（）.DropDownListFor（m=>m.SomeTextField）.HtmlAttributes（新的{id=“cmbSomeTextField_Tab6”，@class=“width-85”}））
@（Html.Kendo（）.DropDownListFor（m=>m.SomeTextField2）.HtmlAttributes（新的{id=“cmbSomeTextField2_Tab6”，@class=“width-85”}））
@（Html.Kendo（）.DropDownListFor（m=>m.SomeTextField3）.HtmlAttributes（新的{id=“cmbSomeTextField3_Tab6”，@class=“width-85”}））
B
下一场
@（Html.Kendo（）.DropDownListFor（m=>m.NextField）.HtmlAttributes（新的{id=“cmbNextField_Tab6”，@class=“width-85”}））
@（Html.Kendo（）
@（Html.Kendo（）

总的来说，这些表的定义方式基本相同。通过CSS很少有额外的格式，只是大部分是带有剑道控件的普通旧HTML，而不是ASP.NET或“香草”HTML控件

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

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

为什么右栏顶部有大量填充/空白
为什么我的下拉菜单在左边的栏被切断
为什么（i）图像显示在下拉列表下方

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

正如评论所说，如果没有这么多表格，你会花更少的时间来做。最好的方法是使用一些框架，比如，但是我认为你可以做你想要的，而不需要太多地改变你的方法，把左右表放在一个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>


COL1 COL2COL3COL4
LeftTableLeftTableLeftTableLeftTableLeftTable
LeftTableLeftTableLeftTableLeftTableLeftTable
LeftTableLeftTableLeftTableLeftTableLeftTable
LeftTableLeftTableLeftTableLeftTableLeftTable
COL1 COL2COL3COL4COL5COL6COL7COL8
右表右表右表右表右表右表右表右表右表右表右表右表
右表右表右表右表右表右表右表右表右表右表右表右表
右表右表右表右表右表右表右表右表右表右表右表右表
右表右表右表右表右表右表右表右表右表右表右表右表
右表右表右表右表右表右表右表右表右表右表右表右表
右表右表右表右表右表右表右表右表右表右表右表右表
右表右表右表右表右表右表右表右表右表右表右表右表
右表右表右表右表右表右表右表右表右表右表右表右表

这使得两张桌子适合相同的空间。您可以更改div的de百分比，使其中一个比另一个宽。

这就是为什么（正如您所承认的）在表中使用表是过时的做法。如果没有大量的样式来固定宽度、高度和垂直对齐，就无法强制两个不同的表匹配。如果可能的话，你应该试着转移到一个更现代的布局，而不是花更多的钱