不要调整表格单元格的大小答案

【问题标题】：Do not resize Table cell不要调整表格单元格的大小
【发布时间】：2011-12-17 00:54:34
【问题描述】：

我的一个表（html 表元素）单元格中有一个很大的 URL（没有空格），它调整了表的大小。我不想调整表格大小，我应该设置什么属性来将 URL 分成新行？

HTML

<table class="ui-grid" cellspacing="0" rules="all" border="1" id="MainContent_gvStatistic" style="border-collapse:collapse;">
    <caption>Statistic (Last 50 conversions)</caption>
    <tbody><tr>
        <th scope="col">Date</th>
            <th scope="col">Result</th>
            <th scope="col">Api</th>
            <th scope="col">IP</th>
            <th scope="col">Source</th>
    </tr><tr>
        <td style="width:200px;">12/16/2011 3:23:59 PM</td>
        <td align="center" style="width:50px;">True</td>
        <td align="center" style="width:100px;">Web2Pdf</td>
        <td align="center" style="width:100px;">::1</td>
        <td style="width:200px;">http://a1.quickcatchlabs.com/phototemplates/football_blimp_1.html?i_url=http%3A//lh3.ggpht.com/yf5lVBB_WNBvBHT1HoIzY1SG0-PY5zRCobP3vBacuSk9N346F7CeAIRSFOltR6ZC1-yf-MNKAcAd7bAZ_A%3Ds612-c&amp;i_name=Patriots%20%20vs%20Redskins&amp;i_venue_name=Gillette%20Stadium%20&amp;i_venue_address=Foxborough%20%2C%20MA&amp;d_Score_0=34&amp;d_Score_1=27&amp;d_Period_0=Final&amp;p_name_0=Patriots%20&amp;p_name_1=Redskins</td>
    </tr>   
    </tbody></table>

CSS

.ui-grid { width: 100%; margin: 5px 0 10px 0; border: solid 1px #eeeeee; border-collapse: collapse; }
.ui-grid td { padding: 2px; border: solid 1px #eeeeee; }
.ui-grid td b { font-weight: bold; }
.ui-grid th { padding: 4px 2px; color: #fff; background: #000000; border-left: solid 1px #eeeeee; text-align: center; }
.ui-grid .alt { background: #fcfcfc; }
.ui-grid .pgr { background: #424242; }
.ui-grid .pgr table { margin: 5px 0; }
.ui-grid .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; }
.ui-grid .pgr a { color: #666; text-decoration: none; }
.ui-grid .pgr a:hover { color: #000; text-decoration: none; }

【问题讨论】：

标签： html css html-table

【解决方案1】：

将以下内容添加到您的 css 中

table-layout:fixed
word-wrap:break-word

以下网站对此有很好的了解 http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/

我稍微修改了你的代码，这对我有用，希望对你有帮助

 <html>    
<div id="wrap">
        <div id="content-primary">
<table class="table" cellspacing="0" rules="all" border="1" id="MainContent_gvStatistic" style="border-collapse:collapse;">
            <caption>
                Statistic (Last 50 conversions)
            </caption><tbody>
        <tr>
                    <th scope="col">Date</th><th scope="col">Result</th><th scope="col">Api</th><th             scope="col">IP</th><th scope="col">Source</th>
                </tr>
        <tr>
                <td style="width:100px">12/16/2011 3:23:59 PM</td><td align="center"                                style="width:50px;">True</td>
        <td style="width:100px">Web2Pdf</td>
        <td style="width:100px">::1</td>
        <td style="width:100px">http://a1.quickcatchlabs.com/phototemplates/football_blimp_1.htmli_url=ht%3A//lh3.ggpht.com/yf5lVBB_WNBvBHT1HoIzY1SG0-PY5zRCobP3vBacuSk9N346F7CeAIRSFOltR6ZC1-yf-MNKAcAd7bAZ_A%3Ds612-%20%2C%20MA&amp;d_Score_0=34&amp;d_Score_1=27&amp;d_Period_0=Final&amp;p_name_0=Patriots%20&amp;p_name_1=Redskins</td>
            </tr>   
        </tbody></table>
</div>
</div>


</html>

    <style type="text/css" media="screen,print,projection">
    @import '/css/lab.css';
#wrap {
    width:60em;
    margin:2em auto;
}
#content-primary {
    float:left;
    width:60%;
}
#content-secondary {
    float:right;
    width:36%;
}
table {
    width:100%;
    border:1px solid #f00;
    word-wrap:break-word;
}
th,
td {
    vertical-align:top;
    text-align:left;
}
    </style>

【讨论】：

如果我把 table-layout:fixed 放在我的桌子上 TD style="width:100px;"在我的表中被忽略。
您可以发布您的表格和 css 的内容吗？

【解决方案2】：

最实用的方法是在每个可接受的断点之后添加标签<wbr>，例如“/”、“?”和“&”（也可能是“=”）。这个标签从早期就被浏览器支持；它不包含在任何 HTML 规范中（尽管它被提议在 HTML5 中标准化），但它实际上总是有效并且没有已知的缺点。

由于这是关于文本中的 URL，因此中断应该出现在自然的分割点，而不是任意的。各种风格指南（如 The Chicago Manual of Style）都有自己的建议，但上面提到的简单断点规则应该是所有帐户都可以接受的，通常就足够了。

在我的 word division in HTML and related matters 页面上有更多信息。

【讨论】：

【解决方案3】：

你可以尝试几件事：

添加CSS3属性word-wrap: break-word;
您可以在表格单元格中放置一个 div。该 div 中的任何内容都不会延伸表格单元格。
max-widthcss 属性

【讨论】：

表格单元格自动调整大小有问题。使用 max-width 并阻止它。我还必须使用溢出：隐藏来达到预期的效果，但这个答案有帮助。

【解决方案4】：

将 URL 括在包含 div 的 td 中。将word-wrap:break-word; width:200px 应用于div 容器。 div 容器是为了 IE 的利益。例如，在 Chrome 中，样式可以直接应用于td。

word-wrap 是非标准的，但它具有出色的浏览器支持，包括 IE6+。

这是example fiddle。

【讨论】：

word-wrap:break-word 不起作用，Url 仍在调整我的表格和单元格的大小
您需要将它应用到内部div 容器，以便 IE 正确呈现它。我已经更新了我的答案。