CODEWITHSUNDEEP
htmlcsshtml-table
Tomas
Tomas

Reputation: 18127

Do not resize Table cell

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

Upvotes: 1

Views: 18258

Answers (4)

MrWhite
MrWhite

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

Jukka K. Korpela
Jukka K. Korpela

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

orangegoat
orangegoat

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&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>

Upvotes: 8

martincarlin87
martincarlin87

Reputation: 11062

You can try several things:

  1. add the CSS3 property word-wrap: break-word;
  2. You can put a div inside your table cells. Nothing within that div will stretch out the table cell.
  3. max-width css property

Upvotes: 1

Related Questions