Не изменять размер ячейки таблицы - PullRequest
1 голос
/ 16 декабря 2011

У меня большой 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; }

Ответы [ 4 ]

7 голосов
/ 16 декабря 2011

Добавьте следующее к вашей 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>
1 голос
/ 16 декабря 2011

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

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

1 голос
/ 16 декабря 2011

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

  1. добавить свойство CSS3 word-wrap: break-word;
  2. Вы можете поместить div в ячейки таблицы. Ничто в этом div не растянет ячейку таблицы.
  3. max-width css property
0 голосов
/ 16 декабря 2011

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

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

Здесь пример скрипки .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...