Question

当我的引导表中的字段值太长时，表将扩展到参数的长度，即使它超过容器。我能够在某种程度上防止这种情况的唯一方法是使用responsive-table，然后滚动条显示在底部，您必须向右滚动才能看到表格数据。当我的表达到容器的长度时，我怎么能这样做，行数据将换行？

以下是正在发生的事情的图像：http://i.stack.imgur.com/Bo1dO.jpg

以下是我视图的一部分，可以在此处看到CSS和示例：https://jsfiddle.net/bsxtpoqd/

<div class="container">
    <div class="row tab-content">
        <div class="row">
            <h3>Assigned Games</h3>
            <p>Please enter a search string in the textbox to search for users</p>

            <form class="form-inline">
                <div class="form-group">
                    <input type="text" class="form-control" id="tableSearch" placeholder="Enter search term...">
                </div>
            </form>
           <div class="table">
                <table id="userTable" class="table">
                    <thead>
                        <tr>
                            <th>UserName</th>
                            <th>Alternate</th>
                            <th>Email</th>
                            <th>Assigned Games</th>
                            <th>Unassigned Games</th>
                       </tr>
                    </thead>
                    <tbody>
                        @foreach (var user in Model)
                        {
                            <tr>
                                <td>@Html.ActionLink(user.UserName, "_GameAssigner", "Admin", new { insUserId = user.InstitutionUserId }, new { @class = "modal-link" })</td>
                                <td>
                                    @user.AlternateId
                                </td>

                                <td>@user.Email</td>
                                <td>
                                    @if (user.Assigned.Any())
                                    {
                                        <a href="#" tabindex="0" role="button" data-toggle="popover" title="Games" data-trigger="focus"
                                           data-content="@foreach (var gameName in user.Assigned){<div>@gameName</div>}">
                                            @user.Assigned.Count</a>
                                    }
                                    else
                                    {
                                        <div class="text-warning">0</div>
                                    }
                                </td>
                                <td>
                                    @if (user.Unassigned.Any())
                                    {
                                        <a href="#" tabindex="0" role="button" data-toggle="popover" title="Games" data-trigger="focus"
                                           data-content="@foreach (var gameName in user.Unassigned) {<div>@gameName</div>}">
                                        @user.Unassigned.Count</a>
                                    }
                                    else
                                    {
                                        <div class="text-warning">0</div>
                                    }
                                </td>

                            </tr>
                        }

                    </tbody>

                </table>
            </div>
        </div>
    </div>
</div>

Answer 1

你需要打破长话。

 <td style="word-break:break-all">

Answer 2

这是你需要的：

<style>
td
{
 word-break: normal;
}
</style>

表数据溢出过去的容器

2 个答案: