반응 형 CSS 표

행 너비와 4 열 (1x4)에 배치 된 4 개의 이미지를 표 너비로 만들었습니다. 반응 형 CSS 표

<table class="insrtTable"> 

    <tr> 
     <td><img src=Guitarra.png></td> 
     <td><img src=Bajo.png></td> 
     <td><img src=Teclado.png></td> 
     <td><img src=Ukelete.png></td> 
    </tr> 
</table>

내 문제

내가 두 개의 행과 두 개의 열 (2 × 2) 내 휴대폰에 이미지를 볼 필요가있다. (이 같은)

<table class="insrtTable"> 

    <tr> 
      <td><img src=Guitarra.png></td> 
      <td><img src=Bajo.png></td>  
    </tr> 
    <tr> 
      <td><img src=Teclado.png></td> 
      <td><img src=Ukelete.png></td> 
    </tr> 
</table>

내가 어떻게 할 수 있습니까? 1 열 4 행을 4 열 1 행으로 변환하는 많은 책임있는 테이블을 볼 수 있지만 저에게 적합한 테이블을 찾을 수는 없습니다.

출처

2017-09-15 Rolando Díaz Vilches

당신이 찾고있는 단어는 "반응"이며 "책임"이 아닙니다.

어떻게 할 수 있습니까? 나는 1 열 4 행을 4 열 1 행으로 변환하는 많은 책임있는 테이블을 볼 수 있지만 저에게는 효과가있는 것을 찾을 수 없습니다.

대부분 이것을 사용하려면 Bootstrap 열을 사용하십시오.

출처

2017-09-15 17:40:56 Strikegently

내 나쁜 시스템 -, 지금 –

문제 없음을 편집합니다. 올바른 용어를 알고 있으면 문제 해결 방법을 훨씬 쉽게 연구 할 수 있습니다. – Strikegently

-1

반응 형 디자인은 테이블로 만들 수 없습니다. 다른 방법을 사용하십시오. 플렉스 컨테이너 또는 플로트를 제안하고 명확히합니다. This 웹 사이트는 플렉스 컨테이너 용입니다.

출처

2017-09-15 17:42:51

실제 질문에 대답하려면 다소 반응이 좋은 표를 만들 수 있지만 table 이후로는 unnecessary hacking이 포함될 것입니다.이 표는 작성된 70 년대에 다시 응답하지 않기 위해 만들어진 것이 아닙니다. 그리고 그들과 함께 더 진보 된 것들을하려고 할 때 당신은 아마도 옵션이 부족할 것입니다.

CSS의 최신 레이아웃은 flexbox와 같은 것을 사용합니다. 이 같은 문제를 해결할 수 : https://codepen.io/nicooga/pen/MEwZgZ :

<div class="container"> 
    <div class="col">1</div> 
    <div class="col">2</div> 
    <div class="col">3</div> 
    <div class="col">4</div> 
</div> 


.container { 
    display: flex; 
    flex-wrap: wrap; 
} 

.container > .col { 
    background: tomato; 
    padding: 16px; 
    border: 5px solid black; 
    width: 50%; 
} 

@media (min-width: 599px) { 
    .container > .col { 
    width: 25% !important; 
    } 
}

여기에 행동을 참조하십시오. 키는 flex-wrap: wrap입니다. 컨테이너의 크기를 초과하면 요소가 다음 행으로 넘칠 수 있습니다.

flexbox에 관해 알아야 할 것은 여기 https://css-tricks.com/snippets/css/a-guide-to-flexbox/입니다.

네이티브 CSS에는 새로운 그리드 시스템이 있는데이 시스템은 flexbox와 그 이상에 대한 모든 것을 수행하는 것 같습니다 : https://css-tricks.com/snippets/css/complete-guide-grid/.

출처

2017-09-15 17:59:39 nicooga

이 간단한 해결책을 시도해 볼 수 있습니다.

는

먼저 (클래스 RESP와 TD)

<table class="insrtTable"> 

     <tr> 
      <td><img src="img1.png"></td> 
      <td><img src="img2.png"></td> 
      <td class="resp"></td> 
      <td class=""><img src="img3.png"></td> 
      <td class=""><img src="img4.png"></td> 
     </tr> 
    </table>

은 다음 테이블에 다음과 같은 스타일을 적용 할 행을 중단하려는 TD 자리를 추가

@media only screen and (max-width: 767px), (min-device-width: 768px) and (max-device-width: 1024px) { 

    thead, tbody, th, td.resp, tr { 
     display: block; 
    } 
}

당신은을 줄일 때 브라우저 창 크기가 768px 미만인 경우 첫 번째 행에서 두 개의 이미지가 깨지고 두 번째 행에서는 두 개의 이미지가 깨집니다.

4 개 이상의 열에이 방법론을 적용하여 필요한 곳에 자리 표시자를 설정할 수 있습니다.

출처

2017-09-15 19:28:59 RFex

플렉스 박스 또는 부트 스트랩 그리드 시스템과 같은 그리드 시스템을 사용해보십시오. 자신 만의 그리드 시스템을 만들 수도 있지만 바퀴 만 재발 명하게됩니다.당신이 당신의 CSS 속성을 표시하는 방법

대응도 함께 간단한 예를 묶여있다 : -

<div class="container"> 
Text content </div> 

.container { 
width:3px; <!-- vs width:3%; --> }

웹 사이트의 응답에 차이를 만들 수 있습니다 % 값 대신 픽셀 하드 코드 된 값의를 사용.

자신의 그리드 개발을위한 유용한 소스가 https://zellwk.com/blog/responsive-grid-system/

출처

2017-09-15 19:29:49 zuif

반응 형 CSS 표

답변

관련 문제