ウィンドウのサイズ変更時に固定ヘッダーテーブルが変形する

ウィンドウを水平方向にサイズ変更するときに、この固定ヘッダーテーブルが列を変形します。それを止める方法はありますか？ウィンドウのサイズ変更時に固定ヘッダーテーブルが変形する

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     table { 
      width: 100%; 
      table-layout: fixed; 
      border-collapse: collapse; 
     } 
     table th { 
      border-left: 1px solid blue; 
     } 
     table th, 
     table td { 
      padding: 5px; 
      text-align: left; 
      border-left:1px solid blue; 
     } 

     table th, table td { 
      width: 150px; 
     } 
     table thead tr { 
      display: block; 
      position: relative; 
     } 
     table tbody { 
      display: block; 
      overflow: auto; 
      width: 100%; 
      height: 300px; 
     } 
    </style> 
</head> 
<body> 

    <table> 
     <thead> 
      <tr> 
       <th>id</th> 
       <th>pick_up_location</th> 
       <th>destination</th> 
       <th>instruction</th> 
       <th>created_at</th> 
       <th>status</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>12322</td> 
       <td>Whanga Road</td> 
       <td>Crescent Street</td> 
       <td>Call when arrive</td> 
       <td>123442342331</td> 
       <td>comming</td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html>

この固定ヘッダーテーブルに注意してください。あなたが100行を持っているときに意味します。行をスクロールできますが、ヘッダーの位置は固定されています。表示ブロックの属性は削除できません。

UPDATE：

マークの答えでは、テーブルは正常に見えるが、まだ小さな画面で変形します。あなたは％で、高さと幅で作業する必要があり、サイズ変更に問題を持っていないためにそれ

出典

2016-07-25 angry kiwi

のスクリーンショット。

Like：width：30％; 高さ：40％;

お手伝いします。

出典

2016-07-25 08:46:09 Hcetipe

タグに明示的な幅や高さを適用しないでください。代わりに、それを与える：

max-width:100%; 
max-height:100%;

出典

2016-07-25 08:48:24

どのような要素ですか？テーブルの –

{ 幅：100％; テーブルレイアウト：固定; border-collapse：collapse; } –

-1

ここでの問題は、あなたがdisplay: blockを適用しているということです、あなたはテーブルの上にそれを使用するべきではありません。また、テーブルのpx値を削除します。ここではそれを表示するcodepen

table th, 
     table td { 
     /*width: 150px*/ 
    } 
    table thead tr { 
     /*display: block; 
     position: relative;*/ 
    } 
    table tbody { 
     /*display: block;*/ 
     overflow: auto; 
     width: 100%; 
     height: 300px; 
    }

： http://codepen.io/sandrina-p/pen/qNYork?editors=1100

--EDIT--

をこれらのコード行を削除％を使用、またはすべての

でそれを削除します-1の前に、改善するために私の解決策に何が間違っているか教えてください。

出典

2016-07-25 08:53:18

次のようにちょうど最後の二つのCCSの宣言を変更します（すべての文字が同じ幅ではないので、ほとんど）すべてのセルにword-break: break-all;を追加

table{ 
     display: block; 
     position: relative; 
    } 
    table tbody { 

     position : relative; 
     overflow: auto; 
     width: 100%; 
     height: 300px; 
    }

出典

2016-07-25 08:54:59 khushal

はあなたのコードの作業を行い
https://jsfiddle.net/3wn1zzfn/

を参照してください。テーブルにすべてのセルを収めることができない場合、width: 150px;がオーバーライドされ、幅はラインの長さに基づいていることが問題です。

出典

2016-07-25 09:21:45

質問を更新しました。 –

低い画面サイズで動作させたい場合は、フォントサイズを縮小することを検討する必要があります –

ウィンドウのサイズ変更時に固定ヘッダーテーブルが変形する

答えて

関連する問題