html - 当屏幕中的下拉菜单发生变化时，表格在我的页面中闪烁？

Question

我设计的表格如下。

<table>
    <tr>
        <td colspan="1">Name</td>
        <td colspan="2">
            <span id="filterByApplication"><%= Html.DropDownList("filterByName", new SelectList(Model.Applications, "Id", "Name", Model.SelectedApplication.Name), "ALL", new { @class ="dropmenu" })%></span>
        </td>
        <td colspan="1">Role</td>
        <td colspan="2" style="text-align: left">
            <span id="filterByRole"><%= Html.DropDownList("filterByApplicationRole", new SelectList(Model.Roles, "Id", "Name", Model.SelectedRole.Name), "ALL", new { @class = "dropmenu" })%></span>
        </td>
    </tr>
    <tr>
        <td colspan="1">ID</td>
        <td colspan="2">
            <input id="id" type="text" value="" class="input" maxlength="8"/>
        </td>
        <td colspan="1">UserName</td>
        <td colspan="2">
            <input id="userName" type="text" value="" placeholder="UserName"/>   
        </td>
    </tr>
    <tr>
         <td colspan="6">
             <input  id="btnsearch" type="button" value="Search" onclick="searchrequest()"/>
        </td>
    </tr>
</table>

每当单击名称下拉列表时， Angular 色都会加载到另一个下拉列表中，此时总屏幕 it.t 表控件都在动态对齐(闪烁)。请告诉我如何避免这种情况？

Answer 1

从您的表中删除所有 colspan 属性，最后一个除外。将其更改为 colspan="4"(而不是 6)。

如果需要设置列宽，可以使用CSS样式。例如:

<tr>
    <td style="width: 10%">
        Id
    </td>
    <td style="width: 40%">
        ...
    </td>
    <td style="width: 10%">
        Username
    </td>
    <td style="width: 40%">
        ...
    </td>
</tr>