不要調整表格單元格

我有一個大的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

不要調整表格單元格

回答

相關問題