두 번째 열이 첫 번째 열 아래로 이동하는 방식으로 두 개의 열 테이블을 만드는 방법은 무엇입니까?

Question

온라인 편집기를 사용하여 웹 사이트를 만들고 있습니다. 나는 두 개의 기둥과 한 개의 기둥이있는 간단한 테이블을 가지고있다. 데스크톱에서는 훌륭하게 보이지만 모바일에서는 콘텐츠를보기 위해 왼쪽과 오른쪽으로 스크롤해야합니다.

두 번째 열이 작은 화면에서 첫 번째 열 아래로 이동하면 반응 형으로 만들고 싶습니다.

<div style="overflow-x: auto;"> 
 
    <table style="height: 452px; width: 821px; margin-left: auto; margin-right: auto;"> 
 
    <tbody> 
 
     <tr style="height: 143.6px;"> 
 
     <td style="width: 280px; height: 143.6px;"><img src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" /></td> 
 
     <td style="width: 439px; height: 143.6px;"> 
 
      <h3 style="text-align: left;"><span style="color: #333333;"><b>It all starts with a test</b></span></h3> 
 
      <br /> 
 
      <p style="line-height: 1.6; text-align: left;"><span style="color: #333333; font-size: large;">This is an example. This is an example. Testing and testing again.</span></p> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

그래서이 예제에서, 나는 작은 화면의 사진 아래에가는 텍스트 부분을 가지고 싶다 :

여기 내 코드입니다. 제발 어떻게 할 수 있니?

감사합니다.

Answer 1

테이블을 사용해서는 안됩니다. 테이블은 책임의 측면에서 매우 불편한 것입니다.

CSS 그리드 레이아웃을 사용하십시오. 내 예제에서는 화면의 크기를 조정 해보십시오. 좁아지면 기둥이 아래로 움직입니다. 창문이 비교적 넓은 경우 나란히 볼 수 있습니다.

https://jsfiddle.net/33fLLdzr/1/

<div class="wrapper"> 
    <div class="box sidebar"><img src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" /></div> 
    <div class="box sidebar2"> 
     <h3 style="text-align: left;">It all starts with a test</h3> 
     <p style="line-height: 1.6; text-align: left;">This is an example. This is an example. Testing and testing again.</p> 
    </div> 
</div> 

<style> 
body { 
    margin: 40px; 
} 

.sidebar { 
    grid-area: sidebar; 
} 

.sidebar2 { 
    grid-area: sidebar2; 
} 

.wrapper { 
    background-color: #fff; 
    color: #444; 
} 

.wrapper { 
    display: grid; 
    grid-template-areas: 
     "sidebar" 
     "sidebar2" 
} 

@media only screen and (min-width: 600px) { 
    .wrapper { 
     grid-template-columns: 50% 50%; 
     grid-template-areas: 
     "sidebar sidebar2" 
    } 
} 
</style> 

Answer 2

당신은 당신이 table, tr 및 td에 display: block; width: 100%; height: auto;을 적용하는 미디어 쿼리를 사용할 수 있습니다. 그렇게하면 td이 서로 아래로 흐를 모든 일반 블록 요소가됩니다.

원하는대로 중단 점을 설정하십시오. 내 발췌 문장에서는 600px로 설정했습니다.

그리고 인라인 스타일을 피하십시오. 당신은 미디어 쿼리를 사용하려는 경우, 그들은

html, body { 
 
margin: 0; 
 
} 
 
table { 
 
    height: 452px; 
 
    width: 821px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
tr { 
 
height: 143.6px; 
 
} 
 
td.x { 
 
    width: 280px; 
 
    height: 143.6px; 
 
} 
 

 
td.y { 
 
    width: 439px; 
 
    height: 143.6px; 
 
} 
 

 
@media screen and (max-width: 600px) { 
 
    table, 
 
    tr, 
 
    td.x, 
 
    td.y { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    } 
 
}

<div style="overflow-x: auto;"> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td class="x"><img src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" /></td> 
 
     <td class="y"> 
 
      <h3 style="text-align: left;"><span style="color: #333333;"><b>It all starts with a test</b></span></h3> 
 
      <br /> 
 
      <p style="line-height: 1.6; text-align: left;"><span style="color: #333333; font-size: large;">This is an example. This is an example. Testing and testing again.</span></p> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>