当屏幕中的下拉列表更改时，表格表单在我的页面中闪烁

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>

每当单击名称下拉列表角色时，总屏幕i.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>