html - 不必要的水平滚动条

我试图建立一个jquery数据表的asp.net mvc视图。我的数据表仅包含一个字段（角色名称），并且“删除/更新/显示”按钮链接。
问题是显示了不必要的水平滚动条：



我如何避免这个不必要的滚动条？

以下是我的观点的摘要：

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

非常感谢你的帮助。

最佳答案

尝试添加此CSS：

overflow-x:hidden

到包裹fieldset的div。