如何使表数据元素只占用所需的空间？

Question

我正在为我们的应用程序开发网页，但我不是任何意义上的设计师/前端UI开发人员。

我有2个div互相浮动，每个div包含一个表，其中包含一些用户输入的数据。我的<TD>元素中的下拉菜单出现问题，因此我将其从<table>更改为<table border="1" style="color: orange;">，但这会使表格中的文字变为橙色;我的错误。

但这就是它的样子。右边的桌子是黑色的，看起来不错。一切都很好，甚至是一致的。左边的桌子是橙色，不好。出于某种原因，（i）图标占据了太多空间并且正在推动我的下拉菜单<td>结束，切断它们。

然后我回到代码并将其更改为style="border-color: orange;"，这样我可以更轻松地区分表格边框与输入控件等。那就是真的搞砸了：

正如你所看到的，现在什么都不是橙色。不是文字，没有边框。但更有趣的是：控件（使用Telerik的Kendo UI创建）是文本框而不是下拉，它们在单元格中占据自己的宽度。更有趣的是，这甚至改变了其他 div / table中的控件。

所以，无论如何，问题是，我能做些什么来使这些（i）图标只占用他们需要的空间？我尝试过简单地将width="25px"添加到TD元素，但是包含我的控件的单元格仍然存在：（

左表看起来像：

<div style="width:100%">
    <div style="width: 40%; float: left">
        <table border="1">
            <tr>
                <td colspan="5">Some Text</td>
            </tr>
            <tr>
                <td colspan="5">Section B - Other Text</td>
            </tr>
            <tr>
                <td>BB0700.&nbsp;</td>
                <td>More Text</td>
                <td class="textalign-right">&nbsp;&nbsp;</td>
                <td class="textalign-center">
                    @(Html.Kendo().DropDownListFor(modelObject => modelObject.FieldName).HtmlAttributes(new { id = "cmbFieldName", @class = "width-85" })) 
                </td>
                <td>
                    <img src="..\..\..\..\UDSMR.UDSCentral.Web\Content\images\Icons\info_Desc.gif" />
                </td>
            </tr>

正确的表或多或少地定义相同，只是列数不同。

Answer 1

第1步 - style =“border：1px solid orange;”

第2步 - 在这里猜一点，但看起来左表中的图标位于带边框的单元格中 - 在右表中它们似乎不是。这会影响布局。

但是我对剑道一无所知，所以它可以与之相关吗？