CSS로 테이블을 다시 작성할 수 있습니까?

테이블이처럼 보이는 다시 할 수 있나요 :CSS로 테이블을 다시 작성할 수 있습니까?

<table> 
    <tr> 
     <td>information 1</td> 
     <td>information 2</td> 
    </tr> 
</table>

CSS?이 같은 것으로

<table> 
    <tr> 
     <td>information 1</td> 
    </tr> 
    <tr> 
     <td>information 2</td> 
    </tr> 
</table>

왜 요구하고 있기 때문 콘텐츠로 가득이 테이블, div은 모바일 디스플레이 용으로 div을 최소화 할 때 멋지지 않습니다.

업데이트 이유 : 왜 이렇게해야합니까? Google은 반응 형 디자인을 원하는 고객을 위해 웹 사이트를 구축하고 있습니다. "문제"는 고객이 html/css를 잘 알지 못하므로 페이지에 콘텐츠를 제공 할 때 WYSIWYG 편집기를 사용한다는 것입니다. 물론 Microsoft Office를 알고 테이블과 함께 해당 프로그램에서 수행되는 것처럼 콘텐츠를 제작할 수 있습니다.

출처

2012-09-18 Raskolnikoov

이고; (추한 FIX)

td { display: block; clear: both; }

오히려있는 div 및 CSS 아닌 테이블 모두를 사용합니까? – crowjonah

tr를보세요 : – Marc

그래서 CSS를 사용하여 셀을 다른 행으로 이동 하시겠습니까? 간단히 말해서 .. 아니오. 기술적으로, 당신은 그런 것처럼 보이게 할 수 있지만, 그것은 약간의 CSS가 될 것입니다. –

td을 효과적으로 감쌀 수 있습니다. 미디어 쿼리를 사용하고 css를 적용하여 셀을 다음 행처럼 보이게 만듭니다. 당신은 사람들이 그들이보고있는 것을 알아 내는데 도움이되는 좋은 시각적 대기열을 제공하기를 원할 것입니다. Here's a fiddle demonstration - 미리보기 창 크기를 조정하십시오.

원래 마크 업을 사용하고 창 적은 폭 400 픽셀보다 때 다음과 같은 CSS 두 번째 td을 감싸 적용 : 내가 당신에게 문제를 이해

td {width: 200px; border: 1px solid black;} 
@media screen and (max-width: 400px) { 
    td { 
     width: 100%; 
     float: left; 
    } 
}

출처

2012-09-18 19:55:52 crowjonah

고마워,이게 해결 됐어. 희망을 갖고. :) – Raskolnikoov

마크 업 프리젠 테이션에만 영향을 미치기 때문에 CSS로 (적어도 쉽게는) 그렇게 할 수 없습니다. 그러나 사용자가 모바일 브라우저를 사용하여 사이트를 방문하고 있음을 감지하면 자바 스크립트로 확실히 할 수 있습니다. 그러나 어떻게 이런 일을하는지에 대한 질문은 원래 질문의 범위를 훨씬 벗어납니다.

많은 웹 사이트에는 모바일 버전과 모바일 버전이 있습니다. PHP, Javascript 등에서 사용자 에이전트를 탐지 할 수있는 미리 작성된 스크립트가 있습니다.

출처

2012-09-18 19:52:25 thatidiotguy

우리는 반응 형 디자인을 원하는 고객을 위해 웹 사이트를 구축하고 있습니다. "문제"는 고객이 html/css를 잘 알지 못하므로 페이지에 콘텐츠를 제공 할 때 WYSIWYG 편집기를 사용한다는 것입니다. 물론 Microsoft Office를 알고 테이블과 함께 해당 프로그램에서 수행되는 것처럼 콘텐츠를 제작할 수 있습니다. :) – Raskolnikoov

@ Raskolnikoov - 그러면 잘못하고 있어요! 고객이 제공하는 포맷이 깨끗한'html'을 포함하지 않는다면 다시 작성하십시오! 아니면 포토샵을 사용하여 조롱 해달라고 요청한 다음 직접 만들어보세요. – bPratik

이 그것을 해결할 것입니다. 제 1 및 제 2 코드 블럭의 차이가있을 예정)

출처

2012-09-18 19:56:47

표 형식의 데이터 인 경우 표가 적합합니다. – Mark

IE에서 작동하지 않습니다. –

CSS로 테이블을 다시 작성할 수 있습니까?

답변

관련 문제