테이블의 크기를 조정할 때 열이 확장되지 않도록 테이블을 수정하려면 어떻게합니까?

Question

나는 다음과 같은 HTML 테이블과 관련된 CSS 한 - 첫 번째 열이 나는 이것이 내가 수평 결과 창을 확장하면 문제

.content { 
     position: relative; 
     max-width: 944px; 
     min-width: 200px; 
     margin: 0 auto; 
     display: flex; 
     justify-content: center;  
} 

의 원인이되는 CSS이라고 생각 http://jsfiddle.net/67LE7/

을 무한히 확장하고 밀어 두 번째 및 세 번째 열을 다음 행으로 가져옵니다. 세 개의 모든 열이 고정 된 크기를 유지하고 동일한 행에 표시되도록하는 것이 좋습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

고정 폭 가격표를 설정하고 미디어 쿼리를 제거해야합니다. 미디어 쿼리가 너비를 다시 설정합니다. 당신이 필요하지 않은 경우 미디어 쿼리는 휴대폰과 태블릿에 좋은 보이게하지만 것입니다 ... 설명에 대한

updated fiddle

.pricing-table{ 
    width: 150px; 

/*@media (max-width: 768px) { 
    .pricing-table{ 
     width: 48.9%; 
    } 
} 
@media (max-width: 480px) { 
    .pricing-table{ 
     width: 100%; 
     margin: 0 0 10px; 
    } 
}*/