0

表がありますが、詳細列が折り返されておらず、表が画面よりも広く、水平スクロール バーを使用するのが面倒です。これが起こる理由は何ですか？どうすればこれを解決できますか？私のコードは以下です。

どんな助けでも大歓迎です。

よろしくお願いします、ウェズリー

<table width="90%">
    <tr>
        <td class="row" colspan="3"><strong>Follow-Up History</strong></td>
    </tr>
    <tr>
        <td width="15%"><b>Consultant</b></td>
        <td width="65%"><b>Details</b></td>
        <td width="20%"><b>Date</b></td>
    </tr>
    <?
        $mydb = mysql_connect('localhost', 'root', 'elves');
        $q3 = "select * from clientcare.subcalls where callid = '$cID' order by `date` ASC";
        $r3 = mysql_query($q3, $mydb) or die("Query q3 died");
        while ($row3 = mysql_fetch_array($r3)) {
            $scConsultant = $row3["consultant"];
            $scDetails = $row3["details"];
            $scDate = $row3["date"];
    ?>
            <tr>
                <td width="15%"><?= $scConsultant; ?></td>
                <td width="65%"><?= $scDetails; ?></td>
                <td width="20%"><?= $scDate; ?></td>
            </tr>
            <tr><td colspan="3"><hr></td><td>&nbsp;</td></tr>
    <?
        }
        mysql_close($mydb);
    ?>
</table>
4

3 に答える 3

3

CSStable-layout: fixed;プロパティを使用widthして、table

このようなものが表示されます -

折り返しなし<td>-テキストは折り返しません(文字列にスペースがない場合)

それ以外の場合、文字列にこのフィドルのようなスペースがある場合、これは問題ありません

tdしかし、長い文字列がオーバーフローしないようにするために

以下のプロパティを使用してテーブル内のデータをラップし、<td>長い文字列をラップします。

table {
   table-layout: fixed;
   width: /* Whatever You Like */ ;
}

td { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

私の最後のフィドル（スペース付きの文字列）

私の最後のフィドル（スペースのない文字列）

PS<td>次のように幅を修正することもできます：フィドル

于 2012-07-27T07:00:20.197 に答える
0

を設定max-widthします。そうしないと、収まらない場合にテーブルが拡張されます

<table style="max-width: 90%;">
于 2012-07-27T07:03:41.060 に答える
0

最後の tr の構造が間違っています。

<tr><td colspan="3"><hr></td><td>&nbsp;</td></tr>

正しい構造

<tr><td colspan="3"><hr></td></tr>
于 2012-07-27T11:18:56.053 に答える