도움이 필요합니다. 반응 형 사이트를 개발 중이며 연락처 페이지가 2 열 또는 1 열로 표시 될 수 있습니다.반응 형 테이블 열을 만드는 방법
이 모바일에서 발생한다 :
그리고이 컴퓨터에서 :
방법이 테이블을 구축하는 어떤 생각을? 각 CSS의 HTML은 다음과 같습니다.
<tr>
<td colspan="2" class="single">Telefone</td>
</tr>
<tr>
<td colspan="2" class="single"><input class="input-left" type="text" id="telefone" name="telefone" maxlength="13" autocomplete="off" title="Digite um número de telefone para contato"></td>
</tr>
아이디어가 있습니까?
고려할 수있는 많은 옵션이 있습니다. 가장 쉬운 해결책은 아마도 동일한 너비의 부동 테이블 두 개를 갖는 것입니다. 와이드 스크린에서는 서로 옆에 떠있을 것입니다. 좁은 화면에서 다른 화면 위에 하나씩 표시합니다.
이 테이블을 채울 때 동일한 수의 행을 추가 할 수 있습니다.
당신은 CSS에서 column-width 속성을 사용하여 페이지 크기에 따라 자동 텍스트 형식을 달성 할 수있다.
HTML
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus malesuada, ante a accumsan pretium, lorem magna hendrerit turpis, eu tempor neque dui non est. Quisque suscipit accumsan rutrum. Praesent in nisi nec felis tincidunt interdum. Cras scelerisque justo eget lectus pulvinar feugiat. Aliquam nec volutpat risus. Vivamus dapibus augue felis. Sed quis posuere dui. Donec ultricies nisl eget erat convallis faucibus at sodales metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
CSS
div
{
column-width:100px;
-moz-column-width:100px; /* Firefox */
-webkit-column-width:100px; /* Safari and Chrome */
}
PS : 당신이 테이블을 사용하는 주장합니다. div의 <td> 안에 텍스트를 넣고 위의 방법을 적용하면됩니다.
다음과 같은 플러그인을 사용하십시오 : responsive tables.
사용자 지정 응답 가능 테이블을 만들려면 미디어 쿼리를 사용하여 수행 할 수 있습니다.
해결 방법에 대한 사용자 지정 응답 테이블을 작성했습니다. table을 확인하십시오.
테이블과 반응이 좋지 않아 div에서 출력 할 수 없습니까? – vico