不要调整表格单元格的大小

Question

不要调整表格单元格的大小

我在我的一个表(html表元素)单元格中有一个大的URL(没有空格)调整表格大小.我不想调整表的大小,我应该设置什么属性来将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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

ora*_*oat 7

将以下内容添加到您的CSS中

table-layout:fixed
word-wrap:break-word

Run Code Online (Sandbox Code Playgroud)

以下网站有一个很好的浏览 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，8 月前
查看次数：	16246 次
最近记录：	14 年，8 月前