不要调整表格单元格

我有一个大的URL（没有空格）在我的一个表格（HTML表格元素）单元格调整表格。我不想调整表格大小，我应该设置哪些属性来将网址分为新行？不要调整表格单元格

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

来源

2011-12-16 Tomas

最实用的方法是添加标记<wbr>每个上可接受的断裂点之后，诸如“/”，“？”和“&”（也许还“=”）。自早期以来，该标签一直受到浏览器的支持;它不包含在任何HTML规范中（虽然它被提议在HTML5中被标准化），但它实际上一直工作并且没有任何缺点。

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

我的网页上有更多关于word division in HTML and related matters的信息。

来源

2011-12-16 16:38:46

环绕在td内的容纳div的URL。将应用于div容器。 div容器是为IE的利益。例如，在Chrome中，这些样式可以直接应用于td。

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

这是example fiddle。

来源

2011-12-16 15:48:50 MrWhite

word-wrap：break-word不起作用，Url仍然调整我的表格和单元格的大小 – Tomas 2011-12-16 16:00:40

您需要将此应用于IE的内部`div`容器才能正确呈现此内容。我已经更新了我的答案。 – MrWhite 2011-12-16 16:51:32

以下添加到您的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>

来源

2011-12-16 15:50:31 orangegoat

如果我把table-layout：固定在我的桌子上，TD style =“width：100px;”在我的表中被忽略。 – Tomas 2011-12-16 15:57:12

您可以尝试几件事情：

添加CSS3属性word-wrap: break-word;
您可以将div放入您的表格单元格中。该div内没有任何内容会伸出表格单元格。
max-width css属性

来源

2011-12-16 15:50:44 martincarlin87

不要调整表格单元格

回答

相关问题