调整窗口大小时固定表头变形

这个固定表头表格在水平调整窗口大小时会变形列。有没有办法阻止？调整窗口大小时固定表头变形

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

我更新了问题。 –

如果你想让它在低屏幕尺寸下工作，你应该考虑减小字体大小 –

调整窗口大小时固定表头变形

回答

相关问题