2017-06-09 17 views
0

私はスクロールテーブルを(テーブル全体として)稼働させることができましたが、今は固定サイズにしてテーブルの行内でのみスクロールしたいと思います。固定テーブル幅とスクロールテーブル行

は、私が<td>の内部値が

<td>LongLongLongLongLongLongLongLong</td> 

テーブル幅が本当に長くなりますがどのように今までならば、100

<table width="100"> 
    <tr> 
    <th>Month</th> 
    <th>Savings</th> 
    </tr> 
    <tr> 
    <td>January</td> 
    <td>$100</td> 
    </tr> 
    <tr> 
    <td>February</td> 
    <td>$80</td> 
    </tr> 
</table> 

これは正常に動作します幅の通常のテーブルを持っているとしましょうその長さに対応するために増加する<td>

私が達成しようとしているのは、<tr>をスクロール可能にすることです。 <tr>内の<td>が本当に長い場合、<tr>はテーブル全体の幅を大きくする代わりにスクロール可能になります。

私はtdをスクロール可能にすることで、部分的な解決策を得ました。しかし、私が代わりに

<table width="100"> 
    <tr> 
    <th>Month</th> 
    <th>Savings</th> 
    </tr> 
    <tr> 

    <td width="50"> 
    <div style="width: 50px; overflow: auto"> 
    JanuaryJanuaryJanuaryJanuaryJanuary 
    </div> 
</td> 
    <td>$100</td> 
    </tr> 
    <tr> 
    <td>February</td> 
    <td>$80</td> 
    </tr> 
</table> 
+0

あなたは 'table'を削除し、' display:table'を 'div'で使用できませんか? – Era

+0

あなたがあなたのtrスクロールを作れば、どのくらい幅が分かるのでしょうか?あなたはあなたの見出しの下で正しく整列していないあなたの列で終わるので、あなたはこの種のもののためのテーブルを使用することはできません。私はあなたが代わりにやるべきだと思うのは、テーブルを希望の幅に広げて、divに入れてオーバーフローさせることです。 – Pete

答えて

0

td<html>ブロックのスクロール要素を作成するのtrをスクロール可能にすることは非常に単純です。この希望

td { 
word-break: break-word; 
} 

(CSS):(CSS)

tr { 
    overflow: scroll; 
} 

はあなたが追加することができ、あなたの<td>要素でより良いビューを作成する<tr>

に以下を追加してみてください助けて!

+0

JSFiddleで試してみましたが、動作させることはできません。https:// jsfiddle .net/5dd8oe80 / – Dino

関連する問題