12

どうすれば、loooongの解説を挿入するたびにテーブルの幅が広がるのを防ぐことができますか？

私は簡単な例を作りました：

<!DOCTYPE html>
<html>
    <body>
        <table width='350'  border="0" align="center" cellpadding="3" cellspacing="1" class="table">
            <tr>
                <th id="row_style" bgcolor='#D6D6D6'>ID</th>
                <th id="row_style" width= "50%" bgcolor='#D6D6D6'>Content</th>
                <th id="row_style" bgcolor='#D6D6D6'>Date</th>
            </tr>
            <tr>
                <td id="row_style" bgcolor='#3399FF' scope='col' width='50'>Example</td>td>
                <td id="row_style" width ='10%'> Content</td>td>
                <td id="row_style" bgcolor='#3399FF' scope='col' width ='10%'>Example</td>td>
                <td width ='10%'></td>
            </tr>
        </table>
    </body>
</html>

「コンテンツ」という単語を増やすと、テーブルの幅が広がります。これを停止して改行を挿入するにはどうすればよいですか。

4

4 に答える 4

16

これは、テーブルの幅を設定することで実行できます。また、次を使用することもできます。

word-wrap:break-word;

本当に長い単語が境界から外れるのを防ぐために。

幅はcssで設定するのが最適です：

編集：含める

table-layout:fixed;

デモ

http://jsbin.com/atonut/1/edit

table {
width:500px;
table-layout:fixed;
}


td {
word-wrap:break-word;
}

問題が信じられないほど長い単語ではなく大量のテキストである場合は、幅のみを使用し、ワードラップはそのままにしておきます。お役に立てば幸いです。

于 2013-01-05T21:32:21.030 に答える
8

ひどいように聞こえますが、次を使用する必要があります。

<tr><td><br></td></tr>
于 2019-03-22T16:28:42.500 に答える
0

ここに答えがあります： 

<table width='350'  border="0" align="center" cellpadding="3" cellspacing="1" class="table">
                <tr>
                    <th id="row_style" bgcolor='#D6D6D6'>ID</th>
                    <th id="row_style" width= "10%" bgcolor='#D6D6D6'>Content</th>
                    <th id="row_style" bgcolor='#D6D6D6'>Date</th>

                </tr>
<tr>
                            <td id="row_style" bgcolor='#3399FF' scope='col' width='10%'>Example</td>
                            <td id="row_style" width ='10%'> Contentd</td>
                            <td id="row_style" bgcolor='#3399FF' scope='col' width ='10%'>Example</td>
                            <td width ='10%'>
</body>
</html>
于 2013-01-05T21:39:32.133 に答える
0

スタイルを追加： 

td
{
    border: solid 1px #000000;
    padding: 5px;
}
th
{
    border: solid 1px #000000;
    padding: 5px;
}
/* @media print
{
    table
    {
        page-break-after: always;
    }
}*/

trにスタイルを与える：

style="page-break-inside: avoid;"
于 2013-10-17T07:11:25.080 に答える