Не изменять размер ячейки таблицы

У меня есть большой URL-адрес (без пробелов) в одной из моей таблицы (элемент таблицы html), которая изменяет размер таблицы. Я не хочу изменять размер таблицы, какое свойство я должен установить для разрыва 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; }

источник

2011-12-16 Tomas

Наиболее практичным подходом является добавление тега <wbr> после каждой приемлемой точки разрыва, например, «/», «?», И «&» (может быть также «=»). Этот тег поддерживался браузерами с первых дней; он не включен в какую-либо спецификацию HTML (хотя он предлагается стандартизоваться в HTML5), но он работает практически всегда и не знает недостатков.

Поскольку это о URL-адресе в тексте, перерывы должны появляться в естественных точках деления, а не произвольно. Различные руководства по стилю (например, «Чикагское руководство по стилю») имеют свои собственные рекомендации, но простые правила точки останова, упомянутые выше, должны быть приемлемыми для всех учетных записей и обычно достаточны.

На странице word division in HTML and related matters есть дополнительная информация.

источник

2011-12-16 16:38:46

Отграничьте URL в содержащем div внутри td. Нанесите word-wrap:break-word; width:200px на контейнер div. Контейнер div предназначен для IE. Например, в Chrome стили могут быть применены непосредственно к td.

word-wrap нестандартен, однако он имеет превосходную поддержку браузера, включая IE6 +.

Адрес example fiddle.

источник

2011-12-16 15:48:50 MrWhite

word-wrap: break-word не работает, Url по-прежнему меняет размер моей таблицы и ячейки – Tomas

Вам нужно будет применить это ко внутреннему контейнеру 'div' для IE, чтобы сделать это правильно. Я обновил свой ответ. – MrWhite

Добавьте следующие строки в 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

Если я поместил таблицу-макет: зафиксировал на моем столе TD style = "width: 100px;" игнорируется в моей таблице. – Tomas

Можете ли вы опубликовать то, что у вас есть для вашего стола и css? – orangegoat

Я разместил HTML-код вместе с CSS! – Tomas

вы можете попробовать несколько вещей:

Добавить свойство CSS3 word-wrap: break-word;
Вы можете поместить div внутри своих ячеек таблицы. Ничто в этом div не будет растягивать ячейку таблицы.
max-width CSS свойство

источник

2011-12-16 15:50:44 martincarlin87

Возникла проблема с изменением размера ячеек таблицы. Используется максимальная ширина и останавливается. Мне также пришлось использовать переполнение: скрытый для достижения желаемого эффекта, но этот ответ помог. –

Не изменять размер ячейки таблицы

ответ

Смежные вопросы