html - 不必要的水平滚动条

Question

我正在尝试使用 jquery 数据表构建一个 asp.net mvc View 。我的数据表只包含一个字段( Angular 色名称)和删除/更新/显示按钮链接。问题是显示了不必要的水平滚动条:

我怎样才能避免这个不必要的滚动条？

以下是我的观点的片段:

<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header"> Roles management </h1>
    </div>
    <!-- /.col-lg-12 -->
</div>
<div class="row">
    <fieldset class="col-md-10 col-md-offset-1 ">
        <legend>Liste des rôles </legend>       
            <div class="table-responsive">
                <table width="100" class="table table-bordered table-hover" id="dataTables-example">
                    <thead>
                        <tr>
                            <th>Designation role</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model)
                        {
                            <tr>
                                <td>
                                    @item.Name
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
            <div class="b-right">
                <button type="button" class="btn btn-primary" onclick="location.href='@Url.Action("Create", "Role")'">
                    <i class="fa fa-plus"></i> Ajouter un role
                </button>
            </div>      
    </fieldset>
 </div>

非常感谢您的帮助。

Answer 1

尝试添加此 css:

overflow-x:hidden

到包装 fieldset 的 div。