미디어 화면이있을 때만 *** px로 너비를 변경하십시오.

Question

테이블 너비를 변경하고 싶지만 어디서나 변경됩니다. 전체 화면 일 때 너비를 1000px로 만들고 싶습니다. 하지만 어디서나 1000 픽셀을 제공합니다. 따라서 페이지를 자르면 테이블이 더 이상 반응하지 않습니다.

예 : Codepenhttp://codepen.io/anon/pen/OPjMyQ

/* 
 
Generic Styling, for Desktops/Laptops 
 
*/ 
 

 
.responsivetable { 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
} 
 
/* Zebra striping */ 
 

 
.responsivetable tr:nth-of-type(odd) { 
 
    background: #eee; 
 
} 
 
.responsivetable th { 
 
    background: #333; 
 
    color: white; 
 
    font-weight: bold; 
 
} 
 
.responsivetable td, 
 
.responsivetable th { 
 
    padding: 6px; 
 
    border: 1px solid #ccc; 
 
    text-align: left; 
 
} 
 
@media only screen and (max-width: 760px), 
 
(min-device-width: 768px) and (max-device-width: 1024px) { 
 
    /* Force table to not be like tables anymore */ 
 
    .responsivetable, 
 
    .responsivetable thead, 
 
    .responsivetable tbody, 
 
    .responsivetable th, 
 
    .responsivetable td, 
 
    .responsivetable tr { 
 
    display: block; 
 
    } 
 
    /* Hide table headers (but not display: none;, for accessibility) */ 
 
    .responsivetable thead tr { 
 
    position: absolute; 
 
    top: -9999px; 
 
    left: -9999px; 
 
    } 
 
    .responsivetable tr { 
 
    border: 1px solid #ccc; 
 
    } 
 
    .responsivetable td { 
 
    /* Behave like a "row" */ 
 
    border: none; 
 
    border-bottom: 1px solid #eee; 
 
    position: relative; 
 
    padding-left: 50%; 
 
    } 
 
    .responsivetable td:before { 
 
    /* Now like a table header */ 
 
    position: absolute; 
 
    /* Top/left values mimic padding */ 
 
    top: 6px; 
 
    left: 6px; 
 
    width: 45%; 
 
    padding-right: 10px; 
 
    white-space: nowrap; 
 
    } 
 
    /* 
 
\t Label the data 
 
\t */ 
 
    .responsivetable td:nth-of-type(1):before { 
 
    content: "Dag"; 
 
    } 
 
    .responsivetable td:nth-of-type(2):before { 
 
    content: "Tijd"; 
 
    } 
 
    .responsivetable td:nth-of-type(3):before { 
 
    content: "Vak"; 
 
    } 
 
    .responsivetable td:nth-of-type(4):before { 
 
    content: "Klas"; 
 
    } 
 
    .responsivetable td:nth-of-type(5):before { 
 
    content: "Lokaal"; 
 
    } 
 
    .responsivetable td:nth-of-type(6):before { 
 
    content: "Leraar"; 
 
    } 
 
}

<table class="responsivetable"> 
 
    <thead> 
 
    <tr> 
 
     <th>Dag</th> 
 
     <th>Tijd</th> 
 
     <th>Vak</th> 
 
     <th>Klas</th> 
 
     <th>Lokaal</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Maandag</td> 
 
     <td>08:45 - 09:35</td> 
 
     <td>Vergadering</td> 
 
     <td>IC.11AO.a</td> 
 
     <td>158</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Maandag</td> 
 
     <td>08:45 - 09:35</td> 
 
     <td>Vergadering</td> 
 
     <td>IC.11AO.a</td> 
 
     <td>158</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Maandag</td> 
 
     <td>08:45 - 09:35</td> 
 
     <td>Vergadering</td> 
 
     <td>IC.11AO.a</td> 
 
     <td>158</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Maandag</td> 
 
     <td>08:45 - 09:35</td> 
 
     <td>Vergadering</td> 
 
     <td>IC.11AO.a</td> 
 
     <td>158</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Maandag</td> 
 
     <td>08:45 - 09:35</td> 
 
     <td>Vergadering</td> 
 
     <td>IC.11AO.a</td> 
 
     <td>158</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Maandag</td> 
 
     <td>08:45 - 09:35</td> 
 
     <td>Vergadering</td> 
 
     <td>IC.11AO.a</td> 
 
     <td>158</td> 
 
    </tr> 
 

 
    </tbody> 
 
</table>

Answer 1

귀하의 질문이 명확하지 않다. 어디에서나 1000px?

간단한 솔루션 사업부에서 그것을 포장하고 당신이 원하는대로이 1000px입니다 페이지가 전체 화면 때 가장 outter는 div의가 될 것입니다 있는지 확인합니다 max-width:1000px;

<div class="responsive"> 
<table class="responsivetable"> 
... 
</table> 
</div> 

.responsive{max-width:1000px;} 
.responsivetable{width:100%;} 

에 사업부를 설정하고, 인 테이블은 항상 주변 div의 100 %가됩니다. 따라서 모든 요소에 너비가 고정 된 너비가 아니므로 화면 크기에 따라 반응 형이됩니다.

-epik