Reputation: 18127
I have large URL(without spaces) in one of my Table(html table element) cell which resize table. I do not want to resize table, what property should I set to break URL into new line?
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&i_name=Patriots%20%20vs%20Redskins&i_venue_name=Gillette%20Stadium%20&i_venue_address=Foxborough%20%2C%20MA&d_Score_0=34&d_Score_1=27&d_Period_0=Final&p_name_0=Patriots%20&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; }
Upvotes: 1
Views: 18258
Reputation: 46012
Surround the URL in a containing div
inside the td
. Apply word-wrap:break-word; width:200px
to the div
container. The div
container is for the benefit of IE. In Chrome, for instance, the styles can be applied directly to the td
.
word-wrap
is non-standard, however, it has excellent browser support, including IE6+.
Here is an example fiddle.
Upvotes: 0
Reputation: 201896
The most practical approach is to add the tag <wbr>
after each acceptable break point, such as “/”, “?”, and “&” (maybe also “=”). This tag has been supported by browsers since the early days; it is not included in any HTML specification (though it is proposed to be standardized in HTML5), but it works practically always and has no know drawbacks.
Since this is about a URL in text, the breaks should appear at natural points of division, not arbitrarily. Various style guides (like The Chicago Manual of Style) have their own recommendations, but the simple break point rules mentioned above should be acceptable on all accounts and normally suffice.
There’s some more info on my page on word division in HTML and related matters.
Upvotes: 1
Reputation: 2703
Add the following to your css
table-layout:fixed
word-wrap:break-word
The following site has a good walk through of this http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/
i modified your code a little and this is what works for me hopefully it will help you
<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&d_Score_0=34&d_Score_1=27&d_Period_0=Final&p_name_0=Patriots%20&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>
Upvotes: 8
Reputation: 11062
You can try several things:
word-wrap: break-word;
max-width
css propertyUpvotes: 1