Question

我突然有一个非常讨厌的问题，我不知道它是怎么发生的。

我正在使用此代码在我的视图中生成一个表：

@{ 
    var grid = new WebGrid( Model, rowsPerPage: 100);
    var columns = new List<WebGridColumn>()
    {
        grid.Column("LeadId", FormLabels.ResourceManager.GetString("ID")),
        grid.Column("Date", FormLabels.ResourceManager.GetString("Date"),
                format: (item) => string.Format("{0:dd-MM-yyyy}", item.Date)),
        grid.Column("Location", FormLabels.ResourceManager.GetString("Location")),
        grid.Column("Name", FormLabels.ResourceManager.GetString("ContactName")),
        grid.Column("Organisation", FormLabels.ResourceManager.GetString("Organisation")),
        grid.Column("Details", FormLabels.ResourceManager.GetString("LeadDetails"))
    };
}

<div class="container">
    <h2>@Headers.ResourceManager.GetString("Opportunities")</h2>

    @grid.GetHtml(
        tableStyle: "table selectableGrid",
        alternatingRowStyle: "alternate",
        columns: columns,
        htmlAttributes: new { data_selecturl=Url.Action("Details", "lead") } )
</div>

这总是能够产生这样的表格：

但突然间，在调试我的项目时，它现在看起来像这样：

如您所见，最终的列文本扩展到"continer" div之外，不再包装。

我可以确认html是相同的，在Firefox中检查时，我看不出计算出的css有什么不同。

我几乎100％确定在这个开始发生之前我没有改变任何css规则，我知道这似乎是不可能的，但我不知道是什么导致了这一点。

有没有人对如何找到罪魁祸首或如何解决包装问题有任何建议？

谢谢

我已经尝试了什么

我在table-layout:fixed上设置了table，但这会将所有列修复为相同的宽度，因此这不是问题。

HTML

1

<div class="container">

    <h2>Opportunities</h2>

        <table class="table selectableGrid" data-selecturl="/en-US/lead/Details">
    <thead>
        <tr>
            <th scope="col">
<a href="/en-US/Lead?sort=LeadId&amp;sortdir=ASC">ID</a>            </th>
            <th scope="col">
<a href="/en-US/Lead?sort=Date&amp;sortdir=ASC">Date</a>            </th>
            <th scope="col">
<a href="/en-US/Lead?sort=Location&amp;sortdir=ASC">Location</a>            </th>
            <th scope="col">
<a href="/en-US/Lead?sort=Name&amp;sortdir=ASC">Contact Name</a>            </th>
            <th scope="col">
<a href="/en-US/Lead?sort=Organisation&amp;sortdir=ASC">Organisation</a>            </th>
            <th scope="col">
<a href="/en-US/Lead?sort=Details&amp;sortdir=ASC">Details</a>            </th>
        </tr>
    </thead>
    <tbody>
        <tr>    
            <td>7</td>
            <td>20-09-2017</td>
            <td>testerton</td>
            <td>testy mcgee</td>
            <td>test llc</td>
            <td>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </td>
        </tr>
        <tr class="alternate">
            <td>8</td>
            <td>20-09-2017</td>
            <td>testerton</td>
            <td>testy mcgee</td>
            <td>test llc</td>
            <td>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </td>
        </tr>
    </tbody>
    </table>

</div>

2

<div class="container">
    <h2>Opportunities</h2>

        <table class="table selectableGrid" data-selecturl="/en-US/lead/Details">
    <thead>
        <tr>
            <th scope="col">
<a href="/en-US/Lead?sort=LeadId&amp;sortdir=ASC">ID</a>            </th>
            <th scope="col">
<a href="/en-US/Lead?sort=Date&amp;sortdir=ASC">Date</a>            </th>
            <th scope="col">
<a href="/en-US/Lead?sort=Location&amp;sortdir=ASC">Location</a>            </th>
            <th scope="col">
<a href="/en-US/Lead?sort=Name&amp;sortdir=ASC">Contact Name</a>            </th>
            <th scope="col">
<a href="/en-US/Lead?sort=Organisation&amp;sortdir=ASC">Organisation</a>            </th>
            <th scope="col">
<a href="/en-US/Lead?sort=Details&amp;sortdir=ASC">Details</a>            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>7</td>
            <td>20-09-2017</td>
            <td>testerton</td>
            <td>testy mcgee</td>
            <td>test llc</td>
            <td>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </td>
        </tr>
        <tr class="alternate">
            <td>8</td>
            <td>20-09-2017</td>
            <td>testerton</td>
            <td>testy mcgee</td>
            <td>test llc</td>
            <td>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </td>
        </tr>
    </tbody>
    </table>

</div>

Answer 1

这里的问题实际上是其中一行在Details列中包含一个非常长的字符串，没有空格。

这扩展了该行的列，并对所有其他行执行相同操作。

我可以用

解决这个问题

table td {
    word-wrap: break-word;
    word-break: break-all
}

但是这会导致其他行缩小到标题行的大小，这意味着日期显示为：

01-0
1-20
00

因此，要解决此问题，我只将其应用于

的最后一列

table tr td:last-child {
    word-wrap: break-word;
    word-break: break-all
}

令人讨厌的是，这似乎不适用于Edge或Chrome，其中日期列仍然如上所述。

WebGrid内容列突然没有包装

我已经尝试了什么

HTML

1 个答案: