特定の列サイズのdiv内でhtmlスクロールテーブルを作成するにはどうすればいいですか？

Question

私は水平方向にスクロールできるテーブルを作ろうとしていますが、ヘッダーで列幅を指定しても、divサイズに縮小されます。

右にオーバーフローしてスクロールを許可します。誰かがなぜ「マージン5％を説明することができ、さらに

.mainframe { 
 
    overflow: hidden; 
 
    position: fixed; 
 
    background-color: blue; 
 
    height:200px; 
 
    width:500px; 
 
} 
 
.wrapper { 
 
    margin: 5%; 
 
    width: 90%; 
 
    height: 90%; 
 
    background-color: red; 
 
} 
 

 
.allow-scroll { 
 
    position: relative; 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow-y: scroll; 
 
    overflow-x: scroll; 
 
    background-color: lime; 
 
}

<div class="mainframe"> 
 
    <div class="wrapper"> 
 
    <div class="allow-scroll"> 
 
     <table> 
 
     <tr> 
 
      <th style="width:200px">Long name item 1</th> 
 
      <th style="width:300px">Even longer name item 2</th> 
 
      <th style="width:400px">Super crazy long item 3 need more words</th> 
 
      <th style="width:200px">Short item 4</th> 
 
      <th style="width:300px">Somewhat long time 5</th> 
 
     </tr> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>2</td> 
 
      <td>3</td> 
 
      <td>4</td> 
 
      <td>5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>2</td> 
 
      <td>3</td> 
 
      <td>4</td> 
 
      <td>5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>2</td> 
 
      <td>3</td> 
 
      <td>4</td> 
 
      <td>5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>2</td> 
 
      <td>3</td> 
 
      <td>4</td> 
 
      <td>5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>2</td> 
 
      <td>3</td> 
 
      <td>4</td> 
 
      <td>5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>2</td> 
 
      <td>3</td> 
 
      <td>4</td> 
 
      <td>5</td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</div>

：ここに私の現在の実装のように動作しますが、何かと

Here is a link to a jsfiddle test は、同じコードを実行されるコードスニペットです"底面では機能しません。私はそれについて何ができるのですか？

Answer 1

テーブルに幅を追加して、水平スクロールできるようにすることができます。

table { 
    width:1400px; 
} 

より良いオプションは、table-layoutプロパティを使用することです。

余裕の問題は、.mainframe要素の高さに起因しています。

あなたは.mainframe要素の高さを必要とし、あなたはそれが一定の高さになります知っている場合は、あなただけの.wrapper要素の高さを低くする必要がheight: 200px;

を削除します。正確なピクセルの高さを使用できます。私は以下のパーセンテージを使用しました。

.wrapper { height: 75%; } // This percentage looks about right.