調整窗口大小時固定表頭變形

這個固定表頭表格在水平調整窗口大小時會變形列。有沒有辦法阻止？調整窗口大小時固定表頭變形

<!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

截圖爲沒有與調整你的高度和寬度工作，並具％的問題。

喜歡：寬度：30％; 身高：40％;

希望能幫到你。

來源

2016-07-25 08:46:09 Hcetipe

不要將明確的寬度或高度應用於標記。相反，給它：

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

來源

2016-07-25 08:48:24

什麼元素？ –

表格{ 寬度：100％; table-layout：fixed; border-collapse：collapse; } –

-1

這裏的問題是，你申請display: block，你不應該使用它在表。還要刪除表上的px值。使用％，或根本

刪除它刪除這些代碼：

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

這裏一個codepen顯示它： http://codepen.io/sandrina-p/pen/qNYork?editors=1100

- 編輯 -

在-1之前請你能告訴我我的解決方案有什麼問題，改進它？

來源

2016-07-25 08:53:18

只需修改最後兩個CCS聲明如下：

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

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

來源

2016-07-25 08:54:59 khushal

添加word-break: break-all;的所有單元格，使您的代碼工作（差不多，因爲所有字符都是相同的寬度不）
見https://jsfiddle.net/3wn1zzfn/

您的問題是，如果無法將所有單元格都放入表格中，則會覆蓋width: 150px;，並且寬度現在基於行的長度。

來源

2016-07-25 09:21:45

我更新了問題。 –

如果你想讓它在低屏幕尺寸下工作，你應該考慮減小字體大小 –

調整窗口大小時固定表頭變形

回答

相關問題