창 크기를 조정할 때 고정 헤더 테이블이 변형 됨

이 고정 헤더 테이블은 창 크기를 가로로 조정할 때 열을 변형합니다. 그걸 막을 방법이 있니?창 크기를 조정할 때 고정 헤더 테이블이 변형 됨

<!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 %; 테이블 레이아웃 : 고정; 국경 붕괴 : 붕괴; } –

-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

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

질문이 업데이트되었습니다. –

낮은 화면 크기에서 작동 시키려면 글꼴 크기를 줄이십시오 –

창 크기를 조정할 때 고정 헤더 테이블이 변형 됨

답변

관련 문제