転置テーブルを水平スクロール可能に変更するにはどうすればよいですか？

Question

私は商品比較のためのテーブルを作っています。それは、テーブル本体の中に、垂直の行、左側のヘッダー、および2つ以上の製品説明が垂直の行に入ったテーブルです。ユーザーが多くの製品を選択した場合は、水平方向にスクロールする必要があります。

this answerのCSSを使用して表を転置しました（つまり、垂直の行を作る）。そして、テーブルがあらかじめ定義された幅を超える場合には、tbodyの内部に水平スクロールバーを追加することができません。私はthis questionに似た何かを探していますが、転置されたテーブルに適用されます。

は、ここで私が今持っているものだ：JSFiddle、ここでは、私は200pxのにテーブル幅を制限するときに何が起こるかです：

Answer 1

inline-block sおよびnowrapの組み合わせを試してみてください。

table { border-collapse: collapse; white-space: nowrap; } 
 
tr { display: block; float: left; } 
 
th, td { display: block; border: 1px solid black; } 
 
tbody, thead { display: inline-block; } 
 

 
tbody { 
 
    width: 300px; 
 
    overflow-y: hidden; 
 
    overflow-x: auto; 
 
}

<table> 
 
<thead> 
 
    <tr> 
 
     <th>name</th> 
 
     <th>number</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
     <td>James Bond</td> 
 
     <td>007</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Lucipher</td> 
 
     <td>666</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Jon Snow</td> 
 
     <td>998</td> 
 
    </tr> 
 
</tbody> 
 
</table>

私は

をラッピングラインを防ぐためにwhite-space: nowrapを追加しましたあなたの他のレイアウト

ためにそれが必要でない場合

1. tableは、私は今あなたがそれらを管理することができますinline-blockとしてtbodyとtheadを表示してきた、ブロックとして表示すべきではありませんインライン要素のようなものです。

あなただけtheadなしtbodyをスクロールしたい場合、それは可能性がありますが、次のようになります

table { border-collapse: collapse; white-space: nowrap; } 
 
tr { display: inline-block; } 
 
th, td { display: block; border: 1px solid black; } 
 
tbody, thead { display: inline-block; vertical-align: top; } 
 

 
tbody { 
 
    width: 150px; 
 
    overflow-y: hidden; 
 
    overflow-x: auto; 
 
    white-space: nowrap; 
 
} 
 
tbody tr { margin-right: -5px;}

<table> 
 
<thead> 
 
    <tr> 
 
     <th>name</th> 
 
     <th>number</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
     <td>James Bond</td> 
 
     <td>007</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Lucipher</td> 
 
     <td>666</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Jon Snow</td> 
 
     <td>998</td> 
 
    </tr> 
 
</tbody> 
 
</table>

あなたが代わりにブロックのレイアウトを考えることができます。実際には、HTMLを除いて、すでに悪いパターンが実装されています。

Answer 2

これは有効なHTMLではありませんが、divodyでtbodyをラップしてdivにwidthとoverflow-xプロパティを与えることができます。